如何在CKEditor源码模式下禁用/启用指定按钮？

嘿，这个场景我之前做自定义CKEditor插件时刚好遇到过，给你分享几个实用的实现思路，亲测有效：

方法1：全局监听模式切换事件，批量控制按钮状态 #

CKEditor切换模式时会触发mode事件，我们可以在编辑器初始化时监听这个事件，根据当前是否为源码模式，针对性地设置不同插件按钮的状态：

// 初始化编辑器时绑定模式切换事件
CKEDITOR.replace('your-editor-id', {
  // 你的其他编辑器配置项
  on: {
    mode: function() {
      const isSourceMode = this.mode === 'source';
      
      // 1. 保持启用的插件（比如自定义的缩写插件、链接、撤销按钮）
      const allowedButtons = ['abbreviation', 'link', 'undo'];
      allowedButtons.forEach(buttonName => {
        const button = this.ui.get(buttonName);
        if (button) {
          // TRISTATE_OFF 代表按钮正常启用状态
          button.setState(CKEDITOR.TRISTATE_OFF);
        }
      });
      
      // 2. 需要禁用的样式类插件
      const disabledButtons = ['bold', 'italic', 'underline', 'format'];
      disabledButtons.forEach(buttonName => {
        const button = this.ui.get(buttonName);
        if (button) {
          // TRISTATE_DISABLED 代表按钮禁用状态，非源码模式恢复正常
          button.setState(isSourceMode ? CKEDITOR.TRISTATE_DISABLED : CKEDITOR.TRISTATE_OFF);
        }
      });
    }
  }
});

方法2：在自定义插件内部单独控制自身按钮 #

如果你是开发自己的插件（比如官方指南里的缩写插件），可以直接在插件的init方法里监听模式变化，确保自身按钮在源码模式下始终可用：

CKEDITOR.plugins.add('abbreviation', {
  init: function(editor) {
    // 添加插件按钮
    editor.ui.addButton('abbreviation', {
      label: '插入缩写',
      command: 'insertAbbreviation',
      toolbar: 'insert'
    });
    
    // 定义插件执行命令
    editor.addCommand('insertAbbreviation', {
      exec: function(editor) {
        // 这里写你的插件核心逻辑，比如弹出对话框插入缩写标签
        const abbrText = prompt('请输入缩写文本：');
        if (abbrText) {
          const abbrTitle = prompt('请输入缩写全称：');
          editor.insertHtml(`<abbr title="${abbrTitle}">${abbrText}</abbr>`);
        }
      }
    });
    
    // 监听模式变化，强制保持按钮可用
    editor.on('mode', function() {
      const abbrButton = editor.ui.get('abbreviation');
      if (abbrButton) {
        // 不管是不是源码模式，都设置为启用状态
        abbrButton.setState(CKEDITOR.TRISTATE_OFF);
      }
    });
  }
});

关键知识点说明 #

• CKEditor按钮有三种核心状态：
  • CKEDITOR.TRISTATE_OFF：正常启用状态（按钮可点击）
  • CKEDITOR.TRISTATE_DISABLED：禁用状态（按钮灰化，不可点击）
  • CKEDITOR.TRISTATE_ON：激活状态（比如粗体按钮被按下时的选中状态）
• 操作按钮前建议先通过editor.ui.get(buttonName)判断按钮是否存在，避免控制台报错。

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