Tinymce5：如何为经典编辑器添加外部工具栏？

核心思路 #

TinyMCE经典编辑器本身不直接支持外部工具栏，但可以通过手动控制工具栏事件+切换编辑器焦点的方式，实现单个外部工具栏对应多个实例的需求。

具体实现步骤 #

1. 创建独立的外部工具栏容器
   在页面中提前定义一个空容器，用来放置共享工具栏：

   <div id="shared-toolbar"></div>
   

2. 初始化第一个编辑器并挂载工具栏到外部容器
   初始化第一个经典编辑器时，通过toolbar_container配置将工具栏指定到外部容器，同时记录当前活跃的编辑器实例：

   let currentEditor;
   // 初始化第一个编辑器
   tinymce.init({
     selector: '#editor-1',
     toolbar_container: '#shared-toolbar',
     setup: function(editor) {
       currentEditor = editor;
       // 编辑器获得焦点时更新当前实例
       editor.on('focus', function() {
         currentEditor = editor;
       });
     }
   });
   

3. 初始化其余编辑器，隐藏自带工具栏
   后续的编辑器实例隐藏自带工具栏，仅保留编辑区域，同时添加焦点监听来切换当前活跃的编辑器：

   // 初始化第二个编辑器
   tinymce.init({
     selector: '#editor-2',
     toolbar: false, // 隐藏自带工具栏
     setup: function(editor) {
       editor.on('focus', function() {
         currentEditor = editor;
       });
     }
   });
   
   // 更多编辑器实例按此逻辑初始化
   

4. 拦截工具栏事件，绑定到当前活跃编辑器
   由于外部工具栏属于第一个编辑器，需要修改事件触发逻辑，让所有操作作用于当前活跃的编辑器：

   // 监听外部工具栏的按钮点击事件
   document.getElementById('shared-toolbar').addEventListener('click', function(e) {
     const button = e.target.closest('.tox-tbtn');
     if (!button || !currentEditor) return;
   
     // 获取按钮对应的命令
     const command = button.getAttribute('data-mce-action') || button.getAttribute('data-mce-command');
     if (command) {
       // 执行当前编辑器的对应命令
       currentEditor.execCommand(command);
     }
   });
   

注意事项 #

• 确保所有编辑器的工具栏配置完全一致，否则切换实例后工具栏按钮的功能会不匹配。
• 若需要动态添加编辑器实例，要统一处理焦点监听逻辑，避免遗漏。
• 部分复杂工具栏控件（如颜色选择器）可能需要额外处理弹窗事件，确保操作能作用于当前活跃编辑器。

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