Angular 13升级至18后CKEditor5失效，求适配解决方案

1. 先搞定版本兼容性问题 #

Angular 18对依赖包版本要求严格，旧版@ckeditor/ckeditor5-angular完全不兼容。先卸载旧包，安装最新兼容版：

npm uninstall @ckeditor/ckeditor5-angular
npm install @ckeditor/ckeditor5-angular@latest

同时把所有CKEditor5核心组件包更新到最新，避免版本不匹配：

npm install @ckeditor/ckeditor5-editor-classic@latest @ckeditor/ckeditor5-essentials@latest @ckeditor/ckeditor5-paragraph@latest

如果用的是自定义构建的编辑器，去CKEditor5在线构建工具重新生成最新版的构建包替换旧文件。

2. 适配Angular 18的独立组件模式 #

如果项目已切换到独立组件架构，无需在NgModule中导入CKEditorModule，直接在组件的imports数组中添加：

import { Component } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

@Component({
  selector: 'app-your-editor',
  standalone: true,
  imports: [CKEditorModule],
  template: `
    <ckeditor [editor]="Editor" data="<p>测试内容</p>"></ckeditor>
  `
})
export class YourEditorComponent {
  public Editor = ClassicEditor;
}

若仍使用NgModule架构，在对应模块的imports数组中导入CKEditorModule即可。

3. 处理Zone.js冲突问题 #

Angular 18的Zone.js版本可能与CKEditor5异步逻辑冲突，先更新Zone.js到最新版：

npm install zone.js@latest

如果编辑器仍存在更新不及时的问题，将初始化逻辑放到Angular Zone外执行：

import { Component, NgZone } from '@angular/core';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';

@Component({
  selector: 'app-your-editor',
  standalone: true,
  imports: [CKEditorModule],
  template: `
    <ckeditor [editor]="Editor" [config]="editorConfig" data="<p>测试内容</p>"></ckeditor>
  `
})
export class YourEditorComponent {
  public Editor = ClassicEditor;
  public editorConfig = {
    init: (editor) => {
      this.ngZone.runOutsideAngular(() => {
        // 编辑器初始化回调逻辑写在这里
      });
    }
  };

  constructor(private ngZone: NgZone) {}
}

4. 修复构建配置警告 #

如果构建时出现CommonJS依赖警告，在angular.json的build.options中添加允许的依赖：

"build": {
  "options": {
    "allowedCommonJsDependencies": [
      "@ckeditor/ckeditor5-core",
      "@ckeditor/ckeditor5-ui",
      "@ckeditor/ckeditor5-editor-classic"
      // 其他用到的CKEditor5包也可以加在这里
    ]
  }
}

5. 依据控制台错误精准排查 #

你截图中的错误大概率是版本不匹配或导入错误，打开浏览器开发者工具的Console面板查看具体报错：

• 若出现Cannot find module，说明漏装了某个CKEditor5组件包，补装对应包即可；
• 若出现TypeError（如找不到属性），说明核心包与Angular组件包版本不同步，将所有CKEditor5相关包更新到同一版本。

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