CKEditor v4.8 SharedSpaces问题：能否仅加载一次自定义按钮与下拉框？

完全没问题，这其实是富文本编辑器（比如你用的CKEditor）的标准最佳实践——自定义按钮、下拉框这类UI组件是注册到编辑器的基础定义层级，而非绑定到单个编辑器实例。你只需要在循环生成内联编辑器之前，一次性完成所有自定义组件的注册，后续每个新创建的编辑器实例都会自动继承这些配置，不用每次循环都重复执行注册代码。

具体实现步骤 #

1. 循环外提前注册自定义UI组件 #

在任何编辑器实例初始化之前，先完成按钮、下拉框和对应命令的注册。这里推荐借助编辑器的instanceCreated事件，同时加个存在性判断避免重复注册报错：

// 循环外执行：一次性注册所有自定义UI组件
CKEDITOR.on('instanceCreated', function(evt) {
  const editor = evt.editor;

  // 注册自定义按钮（先判断是否已存在）
  if (!editor.ui.hasButton('myCustomButton')) {
    editor.ui.addButton('myCustomButton', {
      label: '我的自定义按钮',
      command: 'customButtonCmd',
      toolbar: 'insert,10',
      icon: 'path/to/your/icon.png' // 可选：设置按钮图标
    });
  }

  // 注册自定义下拉框（同样判断是否已存在）
  if (!editor.ui.hasRichCombo('myCustomCombo')) {
    const combo = editor.ui.addRichCombo('myCustomCombo', {
      label: '我的自定义下拉',
      toolbar: 'insert,20',
      allowedContent: true
    });

    // 向下拉框添加选项
    combo.add('option1', '选项1', '选项1的描述文本');
    combo.add('option2', '选项2', '选项2的描述文本');
    
    // 绑定下拉框选择事件
    combo.on('select', function(evt) {
      editor.insertText(evt.data.value);
    });
  }

  // 注册按钮对应的执行命令
  if (!editor.getCommand('customButtonCmd')) {
    editor.addCommand('customButtonCmd', {
      exec: function(editor) {
        // 这里写按钮点击后的逻辑，比如插入自定义内容
        editor.insertHtml('<span class="custom-tag">自定义内容</span>');
      }
    });
  }
});

2. 循环生成内联编辑器实例 #

这时候你只需要正常循环创建内联编辑器，每个实例都会自动加载之前注册好的自定义组件，完全不用再重复调用addButton或addRichCombo：

// 循环创建内联编辑器
for (var i = 0; i < retrievedRecords.length; i++) { 
  const documentBlock = retrievedRecords[i]; 
  // 假设每个数据项对应一个唯一的DIV ID
  const editorId = 'inline-editor-' + documentBlock.id;

  // 创建并插入编辑容器（如果页面上还没有的话）
  const editorDiv = document.createElement('div');
  editorDiv.id = editorId;
  editorDiv.innerHTML = documentBlock.content;
  document.getElementById('editor-container').appendChild(editorDiv);

  // 初始化内联编辑器，自动带上所有自定义UI组件
  CKEDITOR.inline(editorId, {
    // 可选：自定义工具栏，确保包含你的组件
    toolbar: ['myCustomButton', 'myCustomCombo', 'Bold', 'Italic', 'Link']
  });
}

关键注意点 #

• 注册时机：一定要在第一个编辑器实例创建之前完成组件注册，instanceCreated事件是个稳妥的选择，因为它会在每个实例创建时触发，而我们的存在性判断会确保只注册一次。
• 避免重复注册：必须用editor.ui.hasButton、editor.getCommand这类方法判断组件/命令是否已存在，否则重复注册会抛出错误。
• 命令绑定：自定义按钮必须对应已注册的命令，否则点击按钮不会有任何反应。

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