同一页面部署多个带不同工具栏图标CKEditor 5的实现咨询

完全可行，CKEditor 5的每个编辑器实例都是独立隔离的，各自的工具栏配置、插件加载、内容状态不会互相冲突，放心部署即可。

实现步骤 #

1. 准备页面容器
   在HTML中定义两个独立的编辑器容器，通过不同ID区分：

   <div id="editor-basic"></div>
   <div id="editor-advanced"></div>
   

2. 分别初始化编辑器并配置独立工具栏
   针对每个容器，调用create方法时传入专属的toolbar配置，只保留需要的图标：

   // 基础编辑器：仅保留格式和列表工具
   ClassicEditor
       .create(document.querySelector('#editor-basic'), {
           toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'undo', 'redo']
       })
       .catch(error => console.error(error));
   
   // 进阶编辑器：保留标题、链接、代码块等工具
   ClassicEditor
       .create(document.querySelector('#editor-advanced'), {
           toolbar: ['heading', 'link', 'codeBlock', 'blockQuote', 'undo', 'redo']
       })
       .catch(error => console.error(error));
   

进阶：按需加载插件 #

如果两个编辑器需要的功能差异较大，可以在配置中明确指定每个实例加载的插件，避免冗余：

// 基础编辑器仅加载必要插件
ClassicEditor
    .create(document.querySelector('#editor-basic'), {
        plugins: ['Bold', 'Italic', 'List', 'Undo'],
        toolbar: ['bold', 'italic', 'bulletedList', 'numberedList', 'undo', 'redo']
    })
    .catch(error => console.error(error));

// 进阶编辑器加载专属插件
ClassicEditor
    .create(document.querySelector('#editor-advanced'), {
        plugins: ['Heading', 'Link', 'CodeBlock', 'BlockQuote', 'Undo'],
        toolbar: ['heading', 'link', 'codeBlock', 'blockQuote', 'undo', 'redo']
    })
    .catch(error => console.error(error));

注意事项 #

• 若使用自定义构建的CKEditor包，需确保构建文件包含两个编辑器所需的全部插件；若差异过大，也可分别引入不同的构建包。
• 每个编辑器实例的内容、配置、事件监听完全独立，修改其中一个不会影响另一个。

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