如何找出 tinyMCE 中更改文本颜色按钮触发的操作以及如何使用我的自定义按钮 link 它？

Question

我正在尝试在我的项目中使用 tinyMCE，我知道如何在编辑器初始化中向编辑器添加功能 f.ex.:

toolbar: '| forecolor backcolor removeformat |',

但我有自己的自定义工具栏，它与 tinyMCE 编辑器完全分开（我在 HTML 中构建了它）。所以我有一个按钮应该改变所选文本的颜色，问题是 link 我的自定义按钮如何由原始 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 从您自己的自定义代码执行相同的工作：

How to find out which action is triggered by change text color button in tinyMCE and how to link it with my custom button?