时间戳

首页 > 解决方案 > 如何找出由 tinyMCE 中的更改文本颜色按钮触发的操作以及如何将其与我的自定义按钮链接？

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

问题描述

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

toolbar: '| forecolor backcolor removeformat |',

但是我有自己的自定义工具栏，它与 tinyMCE 编辑器完全分开（我用 HTML 构建了它）。所以我有按钮应该改变所选文本的颜色，问题是如何将我的自定义按钮与由原始 tinyMCE 工具栏图标触发的操作链接以更改前景色？

标签： javascripthtmltinymceconsole.log

解决方案

您可以在 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

推荐阅读