为@ckeditor/ckeditor5-build-classic添加特殊字符插件遇重复模块错误

出现CKEditorError: ckeditor-duplicated-modules错误的核心原因：预构建的@ckeditor/ckeditor5-build-classic已经打包了完整的CKEditor核心模块，当你单独导入@ckeditor/ckeditor5-special-characters时，这个插件包也依赖了相同的核心模块，导致项目中出现重复的模块实例，触发冲突。官方文档未明确提及预构建包的限制，是因为特殊字符插件的文档默认针对自定义构建场景。

解决方法 #

方法一：自定义构建编辑器（推荐） #

预构建包无法直接扩展插件，需要基于核心包重新构建：

1. 卸载预构建包：

   npm uninstall @ckeditor/ckeditor5-build-classic
   

2. 安装编辑器核心及所需插件：

   npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-list @ckeditor/ckeditor5-special-characters
   

3. 修改app.js代码，直接从核心模块导入并注册插件：

   import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
   import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
   import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
   import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
   import List from '@ckeditor/ckeditor5-list/src/list';
   import SpecialCharacters from '@ckeditor/ckeditor5-special-characters/src/specialcharacters';
   import SpecialCharactersEssentials from '@ckeditor/ckeditor5-special-characters/src/specialcharactersessentials';
   
   ClassicEditor
   .create( document.querySelector( '#about_me' ), {
       plugins: [
           Essentials, Bold, Italic, List, SpecialCharacters, SpecialCharactersEssentials
       ],
       toolbar: {
           items: [
               'undo', 'redo',
               '|', 'bold', 'italic',
               '|', 'bulletedList', 'numberedList',
               '|', 'specialCharacters'
           ],
       }    
   } )
   .then( editor => {
       console.log( 'Editor was initialized', editor );
   })
   .catch( err => {
       console.error( err.stack );
   });
   

   注意：SpecialCharactersEssentials必须添加，它提供了默认的特殊字符集，否则点击特殊字符按钮后面板为空。

方法二：使用官方在线构建工具 #

如果不想手动配置依赖，可以用官方可视化工具生成自定义构建包：

1. 进入CKEditor5在线构建页面，选择「Classic Editor」作为基础模板
2. 在插件列表中找到并添加「Special Characters」插件
3. 点击「Build」按钮下载自定义构建包
4. 将下载包中的ckeditor.js及相关资源放入项目，替换原预构建包的引用即可

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