如何在TinyMCE 4的onPostRender方法外获取按钮实例并禁用所有按钮

兄弟，这个问题我太有共鸣了！之前把旧CMS里的TinyMCE 3升级到4.6.4的时候，也被砍掉controlManager这事儿坑了好久——毕竟没法像以前那样直接遍历所有按钮了。不过放心，不用去改每个按钮的onPostRender，咱们从editor对象本身就能搞定！

核心思路 #

TinyMCE 4虽然移除了直接通过controlManager访问按钮的入口，但它的UI组件都存在注册器（editor.ui.registry）里，而且编辑器初始化完成后，按钮实例会挂载到editor对象上。我们只需要找准时机（编辑器初始化完成），遍历这些实例调用禁用方法就行。

具体实现代码 #

方法一：禁用所有注册的按钮（覆盖工具栏、菜单栏等所有按钮）

在编辑器的setup回调里监听init事件，等编辑器完全初始化后再执行禁用操作——这一步很关键，提前了的话按钮实例还没创建呢：

tinymce.init({
  selector: '#your-editor-id',
  // 你的其他编辑器配置...
  setup: function(editor) {
    editor.on('init', function() {
      // 先拿到所有注册过的按钮配置
      const allButtonConfigs = editor.ui.registry.getAll().buttons;
      // 遍历每个按钮的key，找到对应的实例
      Object.keys(allButtonConfigs).forEach(function(buttonKey) {
        const buttonInstance = editor.buttons[buttonKey];
        // 确保实例存在且有禁用方法，再执行禁用
        if (buttonInstance && typeof buttonInstance.setDisabled === 'function') {
          buttonInstance.setDisabled(true);
        }
      });
    });
  }
});

方法二：仅禁用工具栏上的按钮（更精准）

如果你的需求只是禁用工具栏按钮，不想动菜单栏的，那可以直接遍历工具栏的控件组，针对性处理：

tinymce.init({
  selector: '#your-editor-id',
  toolbar: 'undo redo bold italic alignleft', // 你的工具栏按钮配置
  // 其他配置项...
  setup: function(editor) {
    editor.on('init', function() {
      // 找到工具栏下的所有控件组
      const toolbarGroups = editor.theme.panel.find('toolbar > *');
      toolbarGroups.each(function(group) {
        // 遍历组内的每个按钮
        group.items().each(function(button) {
          if (button.type === 'button' && typeof button.setDisabled === 'function') {
            button.setDisabled(true);
          }
        });
      });
    });
  }
});

踩坑提醒 #

• 一定要在init事件里执行代码！我一开始没等初始化完成就调用，结果拿不到按钮实例，折腾了半天。
• 针对4.6.4这个版本，这两种方法都亲测有效，我在自己的自定义CMS集成第三方插件时用过，完全能实现批量禁用。
• 后续要恢复按钮的话，只需要把setDisabled(true)改成setDisabled(false)就行，非常方便。

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