如何在TinyMCE自定义工具栏按钮的onAction中获取onClick事件？

TinyMCE 自定义工具栏按钮的 onAction 回调确实仅提供按钮状态控制的API，没有直接暴露原生点击事件，且废弃的 window.event 不建议使用。你可以通过以下方法获取原生点击事件：

• 利用按钮API的 getButtonElement() 方法获取按钮对应的DOM元素，然后给该元素绑定原生 click 事件监听，即可拿到完整的原生事件对象（包括 event.target、event.currentTarget 等）。

示例代码如下：

editor.ui.registry.addButton('customButton', {
    text: '自定义按钮',
    icon: 'icon-name',
    onAction: (api) => {
        // 获取按钮DOM元素
        const buttonEl = api.getButtonElement();
        // 绑定原生click事件（添加标记避免重复绑定）
        if (!buttonEl.dataset.eventBound) {
            buttonEl.addEventListener('click', (event) => {
                // 这里可获取完整原生点击事件
                console.log(event.target);
                console.log(event.currentTarget);
                // 执行业务逻辑
            });
            buttonEl.dataset.eventBound = 'true';
        }
    },
});

另外，也可以在TinyMCE的setup阶段提前绑定事件，确保按钮初始化完成后即可监听：

tinymce.init({
    // 其他配置项
    setup: (editor) => {
        editor.on('PostRender', () => {
            const customButton = editor.ui.registry.get('customButton');
            if (customButton) {
                const buttonEl = customButton.getButtonElement();
                buttonEl.addEventListener('click', (event) => {
                    console.log('点击事件:', event);
                });
            }
        });
    },
    toolbar: 'customButton'
});

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