TinyMCE 6.7.0：如何捕获指定工具栏按钮的点击事件

你遇到的问题是因为TinyMCE 6中大部分内置工具栏按钮已不再依赖ExecCommand事件，而是采用了新的Action系统，所以之前的监听方式只对少数仍使用ExecCommand的按钮（比如链接）有效。下面提供两种可靠的解决方案：

方案一：监听ActionExecuted全局事件 #

这个事件会在任何Action执行时触发，不管是通过工具栏按钮、菜单还是快捷键，能覆盖你需要的所有目标按钮。

首先明确目标按钮对应的Action名称：

• 插入/编辑链接：mceLink
• 插入/编辑图片：mceImage
• 插入/编辑媒体：mceMedia
• 插入模板：mceTemplate
• 源代码：mceCodeEditor

在TinyMCE的setup配置中添加监听：

tinymce.init({
  // 其他配置项...
  setup: function(editor) {
    editor.on('ActionExecuted', function(e) {
      const targetActions = ['mceLink', 'mceImage', 'mceMedia', 'mceTemplate', 'mceCodeEditor'];
      if (targetActions.includes(e.action)) {
        // 这里执行你的自定义代码
        console.log(`触发了${e.action}操作`);
        // 示例：插入自定义代码片段
        editor.insertContent('<p>自定义插入内容</p>');
        
        // 如需阻止原Action执行，可添加：
        // e.preventDefault();
      }
    });
  }
});

方案二：修改目标按钮的点击逻辑 #

直接修改工具栏按钮的onAction方法，仅针对工具栏点击生效，适合不需要监听快捷键/菜单触发的场景。

同样在setup配置中实现：

tinymce.init({
  // 其他配置项...
  setup: function(editor) {
    // 定义需要修改的按钮名称和对应原Action
    const targetButtons = [
      { name: 'link', action: 'mceLink' },
      { name: 'image', action: 'mceImage' },
      { name: 'media', action: 'mceMedia' },
      { name: 'template', action: 'mceTemplate' },
      { name: 'code', action: 'mceCodeEditor' }
    ];

    targetButtons.forEach(item => {
      editor.ui.registry.modifyButton(item.name, {
        onAction: function() {
          // 先执行自定义代码
          console.log(`${item.name}按钮被点击`);
          editor.insertContent('<p>自定义插入内容</p>');
          
          // 再执行原按钮逻辑
          editor.execCommand(item.action);
        }
      });
    });
  }
});

注意：如果需要调整自定义代码与原按钮逻辑的执行顺序，直接调换对应代码块位置即可。

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