如何在TinyMCE工具栏追加插件按钮而非替换原有工具栏？

嘿，我之前也碰到过这个困扰，其实问题出在TinyMCE的toolbar配置逻辑上——当你直接指定toolbar的值时，它会完全替换默认工具栏，而不是追加。给你几个简单有效的解决办法：

方法1：明确包含原有工具栏按钮 + 新增按钮 #

如果你知道默认工具栏的常用按钮（比如加粗、斜体、下划线这些），可以直接把它们和颜色按钮一起写在toolbar配置里，比如：

tinymce.init({
  selector: '.editor',
  branding: false,
  height : "200",
  plugins: "textcolor",
  // 保留原有常用按钮，再追加颜色按钮
  toolbar: "bold italic underline forecolor backcolor"
});

这样既保留了原来的工具栏功能，又添加上了文字颜色和背景色按钮。

方法2：先获取默认工具栏内容，再追加按钮 #

如果你不确定默认工具栏的完整内容，可以先临时初始化一个不带toolbar配置的编辑器，然后在控制台打印默认的toolbar值：

// 临时代码，用于获取默认toolbar
tinymce.init({
  selector: '.temp-editor'
});
console.log(tinymce.settings.toolbar);

把控制台输出的默认toolbar字符串复制出来，再在末尾加上forecolor backcolor，放到你的正式配置里就行。

方法3：使用toolbar_merge配置（TinyMCE 5.4+支持） #

如果你用的是较新版本的TinyMCE（5.4及以上），可以直接开启toolbar_merge选项，这样指定的toolbar内容会自动追加到默认工具栏后面，无需手动写原有按钮：

tinymce.init({
  selector: '.editor',
  branding: false,
  height : "200",
  plugins: "textcolor",
  // 开启工具栏追加模式
  toolbar_merge: true,
  // 只写需要追加的按钮即可
  toolbar: "forecolor backcolor"
});

这样设置后，颜色按钮就会乖乖出现在原有工具栏的末尾，不会替换掉原来的功能啦~

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