TinyMCE5禁用部分工具栏按钮与菜单选项的实现困惑

问题背景 #

尝试禁用TinyMCE的部分工具栏按钮与菜单选项时，编写了如下代码，但设置disabled属性后无效果：

const buttons = this.editor.ui.registry.getAll().menuItems;
for (let id in buttons) {
    if (buttons.hasOwnProperty(id)) {
        let button = buttons[id];
        button.disabled = !enabled;
    }
}

根据TinyMCE的接口定义，disabled确实是按钮的合法属性：

interface BaseToolbarButtonSpec<I extends BaseToolbarButtonInstanceApi> {
    disabled?: boolean;
    tooltip?: string;
    icon?: string;
    text?: string;
    onSetup?: (api: I) => (api: I) => void;
}

解决方案 #

直接修改注册表中的disabled属性不会触发UI更新，需使用TinyMCE官方提供的API来控制组件状态：

1. 禁用工具栏按钮 #

通过editor.ui.registry.get()获取按钮实例，调用setDisabled()方法修改状态：

// 单个按钮禁用
const boldButton = this.editor.ui.registry.get('toolbar', 'bold');
if (boldButton) {
    boldButton.setDisabled(true); // 禁用
    // boldButton.setDisabled(false); // 启用
}

// 批量禁用指定按钮
const targetButtonIds = ['bold', 'italic', 'underline'];
targetButtonIds.forEach(id => {
    const button = this.editor.ui.registry.get('toolbar', id);
    if (button) {
        button.setDisabled(!enabled);
    }
});

2. 禁用菜单选项 #

菜单选项需通过menuItem类型获取实例，再调用setDisabled()：

// 单个菜单选项禁用
const cutMenuItem = this.editor.ui.registry.get('menuItem', 'cut');
if (cutMenuItem) {
    cutMenuItem.setDisabled(true);
}

// 批量处理菜单选项
const menuItems = this.editor.ui.registry.getAll().menuItems;
for (let id in menuItems) {
    if (menuItems.hasOwnProperty(id)) {
        const menuItem = this.editor.ui.registry.get('menuItem', id);
        if (menuItem) {
            menuItem.setDisabled(!enabled);
        }
    }
}

3. 初始化时预设禁用状态 #

若需在组件注册时就设置禁用状态，可通过onSetup钩子处理：

this.editor.ui.registry.addButton('custom-button', {
    text: '自定义按钮',
    onSetup: (api) => {
        // 初始禁用
        api.setDisabled(true);
        // 返回清理函数（可选）
        return () => {};
    }
});

关键说明 #

• TinyMCE的UI组件状态由内部API维护，直接修改注册表对象属性不会触发DOM更新，必须使用官方setDisabled()方法。
• 工具栏按钮和菜单选项的获取类型不同，分别对应toolbar和menuItem，需调用editor.ui.registry.get(type, id)获取实例。

内容的提问来源于stack exchange，提问作者erik.c