如何在TinyMCE v6.x中通过代码模拟自定义工具栏按钮点击事件

在TinyMCE 6.x版本中，旧版本通过tinymce.activeEditor.buttons['按钮名'].onclick()模拟点击的方式对自定义按钮不再生效，但内置按钮仍兼容该逻辑。针对自定义按钮，可通过以下两种方式实现模拟点击：

方法一：直接调用按钮的onAction方法 #

自定义按钮在注册时通过onAction定义了点击触发的逻辑，可通过编辑器的UI注册表直接获取该方法并调用：

const editor = tinymce.activeEditor;
// 从UI注册表中获取自定义按钮的配置
const customButton = editor.ui.registry.getAll().buttons['newButton'];
// 调用onAction方法，传入编辑器实例作为参数
if (customButton && typeof customButton.onAction === 'function') {
  customButton.onAction(editor);
}

方法二：通过DOM元素触发点击事件 #

如果无法通过UI注册表获取按钮配置，可直接找到工具栏中对应按钮的DOM元素，模拟原生点击：

// 通过按钮的data-mce-btn属性定位DOM
const buttonDom = document.querySelector('[data-mce-btn="newButton"]');
// 或者通过按钮文本/aria-label定位
// const buttonDom = document.querySelector('[aria-label="Click me"]');
if (buttonDom) {
  buttonDom.click();
}

原因说明 #

TinyMCE 6.x重构了UI组件的管理逻辑，自定义按钮的点击逻辑不再挂载到editor.buttons对象的onclick属性上，而是统一通过ui.registry管理，因此需要直接调用注册时定义的onAction方法；内置按钮因版本兼容保留了旧的调用方式，所以仍可使用onclick()触发。

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