如何找出tinyMCE中更改文本颜色按钮触发的操作以及如何将其与我的自定义按钮链接？

Question

我正在尝试在我的项目中使用tinyMCE，我知道如何在编辑器 init f.ex 中向编辑器添加功能：toolbar: '| forecolor backcolor removeformat |',但我有自己的自定义工具栏，它与tinyMCE编辑器完全分开（我用HTML构建了它）。所以我有一个应该改变所选文本颜色的按钮，问题是如何将我的自定义按钮与原始tinyMCE工具栏图标触发的操作链接起来以更改前景色？

Answer 1

您可以向 TinyMCE 配置添加一些代码，以查看 TinyMCE 中何时发出命令。

setup: function(editor) {

    editor.on('ExecCommand', function (e) {

        console.log('ExecCommand:', e);

    });

} 

当运行 TinyMCE 命令时，这将向浏览器的控制台输出一些内容。当您更新文本颜色（通过forecolor工具栏按钮）时，您会看到如下命令：

ExecCommand: {

  command: "mceApplyTextcolor", 

  ui: "forecolor", 

  value: "#2DC26B", 

  type: "execcommand", 

  target: EE, 

  …

}

我创建了一个 TinyMCE Fiddle，它展示了如何使用 execCommand 从您自己的自定义代码执行相同的工作：

https://fiddle.tiny.cloud/Hxhaab/2