如何为TinyMCE添加<code>和<pre>格式的工具栏按钮或快捷键？

我之前也被TinyMCE这绕来绕去的菜单路径折磨过，后来研究了下配置，发现完全可以把<code>行内代码、<pre>块级代码的操作直接放到工具栏，甚至设置快捷键一键触发，和<b>、<i>的操作体验看齐。

先解释下你遇到的小坑 #

你直接把code加到工具栏出现源代码按钮，是因为TinyMCE默认自带了一个code插件，它对应的是查看/编辑源代码视图的功能，和你要的行内/块级代码格式不是一回事，所以得自定义专属按钮才行。

方案1：添加自定义工具栏按钮 #

在TinyMCE的初始化配置里，通过setup函数创建专属按钮，再把按钮加到工具栏列表里就行：

tinymce.init({
  selector: '#your-textarea-id',
  // 把自定义按钮插入工具栏，位置可以按你的习惯调整
  toolbar: 'undo redo | bold italic | code-inline code-block',
  setup: function(editor) {
    // 行内代码按钮（对应<code>标签）
    editor.ui.registry.addButton('code-inline', {
      text: '<>', // 按钮显示的文字，也可以用icon属性设置图标
      tooltip: '插入行内代码',
      onAction: function() {
        // 调用官方格式命令，一键切换行内代码样式
        editor.execCommand('mceFormatInline', false, 'code');
      }
    });

    // 块级代码按钮（对应<pre>标签）
    editor.ui.registry.addButton('code-block', {
      text: '{}',
      tooltip: '插入块级代码',
      onAction: function() {
        // 切换块级代码样式
        editor.execCommand('mceFormatBlock', false, 'pre');
      }
    });
  }
});

如果想让按钮更美观，可以换成TinyMCE内置图标，比如把text: '<>'改成icon: 'code-sample'（注意确认你的TinyMCE版本支持该图标），或者自定义CSS图标。

方案2：设置快捷键（一键触发） #

配合工具栏按钮，再加上快捷键，操作效率直接拉满！同样在setup函数里添加：

setup: function(editor) {
  // 上面的按钮代码...

  // 行内代码快捷键：Ctrl+Shift+C（Mac可以换成Cmd+Shift+C）
  editor.addShortcut('Ctrl+Shift+C', '插入行内代码', function() {
    editor.execCommand('mceFormatInline', false, 'code');
  });

  // 块级代码快捷键：Ctrl+Shift+P
  editor.addShortcut('Ctrl+Shift+P', '插入块级代码', function() {
    editor.execCommand('mceFormatBlock', false, 'pre');
  });
}

快捷键组合可以完全根据你的使用习惯修改，怎么顺手怎么来。

这样配置后，你就能像用<b>、<i>一样，直接点击工具栏按钮或按下快捷键，一键切换行内/块级代码格式，再也不用反复点四次菜单啦！

内容的提问来源于stack exchange，提问作者freefaller