Angular多Web组件在Frame中集成CKEditor5遇重复模块错误求助

问题本质 #

CKEditor 5会在全局window对象上写入CKEDITOR_VERSION和CKEDITOR_TRANSLATIONS标记，用于检测重复加载。由于你的两个Web组件在同一Frame内切换不刷新页面，前一个组件销毁时这些全局标记不会自动清除，导致第二个组件初始化CKEditor时触发重复模块错误。

可行解决方案 #

方案1：组件销毁时清除全局标记（快速修复）

在每个集成CKEditor的组件中，利用ngOnDestroy钩子在组件销毁时清理全局标记，既保证当前组件正常使用CKEditor，又不会给下一个组件留下冲突变量：

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-ckeditor-component',
  templateUrl: './ckeditor-component.component.html'
})
export class CKEditorComponent implements OnDestroy {
  // 你的组件业务代码...

  ngOnDestroy(): void {
    // 清除CKEditor全局标记
    delete (window as any).CKEDITOR_VERSION;
    delete (window as any).CKEDITOR_TRANSLATIONS;
    
    // 额外清理编辑器实例（避免内存泄漏）
    if ((window as any).CKEDITOR_INSTANCES) {
      Object.values((window as any).CKEDITOR_INSTANCES).forEach((instance: any) => {
        instance.destroy();
      });
      delete (window as any).CKEDITOR_INSTANCES;
    }
  }
}

方案2：自定义CKEditor构建（根源解决）

使用CKEditor 5的模块化按需导入，避免使用带有全局标记的预构建包，从根本上消除全局污染：

1. 安装核心包与所需插件：

   npm install @ckeditor/ckeditor5-core @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-heading @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-angular
   

2. 在组件中自定义编辑器：

   import { Component } from '@angular/core';
   import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
   import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
   import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
   import Heading from '@ckeditor/ckeditor5-heading/src/heading';
   import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
   
   @Component({
     selector: 'app-custom-ckeditor',
     template: `<ckeditor [editor]="Editor" [config]="editorConfig"></ckeditor>`
   })
   export class CustomCKEditorComponent {
     public Editor = ClassicEditor;
     public editorConfig = {
       plugins: [Bold, Italic, Heading, Paragraph],
       toolbar: ['heading', '|', 'bold', 'italic', '|', 'undo', 'redo']
     };
   }
   

3. 在Angular模块中导入CKEditor模块：

   import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
   
   @NgModule({
     imports: [
       // 其他模块...
       CKEditorModule
     ]
   })
   export class YourModule { }
   

为什么你的之前方案失效？ #

• 方案1在ngOnInit时清除全局标记：当前组件初始化时就删掉了CKEditor依赖的全局变量，导致自身无法正常初始化编辑器。
• 方案2的条件导入：Angular模块是静态编译的，运行时的window变量判断无法在构建阶段生效，因此导致构建失败。

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