Angular CKEditor5不同场景下关闭实时协作功能的方法

核心问题根源 #

你遇到的Packages were duplicated in node_modules错误，本质是两个自定义CKEditor5构建共享大量核心依赖，但版本不一致或npm/yarn重复安装导致的依赖冲突。最合理的解决思路是尽量复用单一构建，而非维护两个独立构建，以下是具体可行方案：

方案一：复用单构建，动态启用/禁用协作功能（最优解） #

无需维护两个构建，利用CKEditor5的动态插件配置能力，根据页面场景切换功能：

1. 自定义构建保留所有插件
   在你的CKEditor5自定义构建中，同时包含基础插件、RealTimeCollaborativeEditing和PresenceList，确保所有插件都被打包。

2. Angular组件中动态配置
   根据页面A/B的需求，在组件内定义不同的编辑器配置：

   // 页面A（协作编辑场景）的配置
   public collabEditorConfig = {
     plugins: [
       Essentials, Paragraph, Bold, Italic,
       RealTimeCollaborativeEditing, PresenceList
       // 其他需要的插件
     ],
     toolbar: ['bold', 'italic', ...],
     collaboration: {
       channelId: 'page-a-doc-123',
       // 协作相关配置
     },
     presenceList: {
       container: '#presence-list-wrapper'
     }
   };
   
   // 页面B（常规编辑场景）的配置
   public basicEditorConfig = {
     plugins: [
       Essentials, Paragraph, Bold, Italic
       // 仅保留基础插件，排除协作类插件
     ],
     toolbar: ['bold', 'italic', ...]
     // 不配置collaboration和presenceList参数
   };
   

   在组件模板中通过[config]绑定对应配置即可，CKEditor5会自动加载对应插件。

方案二：环境变量控制单构建的内容（适合体积敏感场景） #

如果需要在构建层面剔除协作插件以减少打包体积，可通过环境变量切换构建内容：

1. 修改自定义构建的webpack配置
   在CKEditor5构建的webpack.config.js中添加环境变量判断：

   const isCollabBuild = process.env.BUILD_TYPE === 'collab';
   
   module.exports = {
     plugins: [
       new CKEditorWebpackPlugin({
         plugins: [
           '@ckeditor/ckeditor5-essentials/src/essentials',
           '@ckeditor/ckeditor5-paragraph/src/paragraph',
           // 根据环境变量决定是否引入协作插件
           ...(isCollabBuild ? [
             '@ckeditor/ckeditor5-real-time-collaboration/src/realtimecollaborativeediting',
             '@ckeditor/ckeditor5-real-time-collaboration/src/presencelist'
           ] : [])
         ],
         // 其他构建配置
       })
     ]
   };
   

2. 添加构建脚本
   在自定义构建的package.json中添加两个构建命令：

   {
     "scripts": {
       "build:collab": "BUILD_TYPE=collab webpack --mode production",
       "build:basic": "BUILD_TYPE=basic webpack --mode production"
     }
   }
   

3. Angular项目中引入对应产物
   将两个构建产物分别放入Angular项目的不同目录，在对应页面组件中引入即可。注意必须保证两个构建的所有CKEditor5依赖版本完全一致。

方案三：强制统一依赖版本（迫不得已时使用） #

如果坚持维护两个独立构建，需强制所有CKEditor5依赖版本一致：

1. 统一版本号
   检查两个自定义构建的package.json，确保所有@ckeditor/ckeditor5-*包（包括核心包如@ckeditor/ckeditor5-core）的版本号完全相同。

2. 强制npm/yarn使用统一版本

   • Yarn用户：在Angular项目根package.json中添加resolutions字段：

     "resolutions": {
       "@ckeditor/ckeditor5-core": "39.0.2",
       "@ckeditor/ckeditor5-editor-classic": "39.0.2",
       // 列出所有用到的CKEditor5包，版本统一
     }
     

   • Npm用户：先安装npm-force-resolutions工具，再添加预安装脚本：

     "devDependencies": {
       "npm-force-resolutions": "^0.0.10"
     },
     "scripts": {
       "preinstall": "npx npm-force-resolutions"
     }
     

3. 重装依赖
   删除node_modules、package-lock.json/yarn.lock，重新执行安装命令：

   rm -rf node_modules package-lock.json && npm install
   

内容的提问来源于stack exchange，提问作者Thanh Nguyen Viet