Angular 16中CKEditor5 SimpleUploadAdapter类型不兼容报错求助

问题详情 #

使用Angular 16集成CKEditor5的SimpleUploadAdapter时，出现TS2322类型错误：

[ERROR] TS2322: Type 'typeof SimpleUploadAdapter' is not assignable to type 'string | PluginConstructor<Editor>'.
  Type 'typeof SimpleUploadAdapter' is not assignable to type 'PluginClassConstructor<Editor> & PluginStaticMembers<Editor>'.
    Type 'typeof SimpleUploadAdapter' is not assignable to type 'PluginClassConstructor<Editor>'.
      Types of construct signatures are incompatible.

依赖版本：

"@ckeditor/ckeditor5-angular": "^7.0.0",
"@ckeditor/ckeditor5-core": "^39.0.2",
"@ckeditor/ckeditor5-engine": "^39.0.2",
"@ckeditor/ckeditor5-upload": "^39.0.2",
"@ckeditor/ckeditor5-utils": "^39.0.2",
"@ckeditor/ckeditor5-watchdog": "^39.0.2",

组件核心代码：

import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import {EditorConfig} from '@ckeditor/ckeditor5-core';
import {SimpleUploadAdapter} from '@ckeditor/ckeditor5-upload';

export class TemplateFormComponent implements OnInit {
 Editor = ClassicEditor;
 editorConfig: EditorConfig = {
    plugins:  [SimpleUploadAdapter],
    // 其他配置...
  };
}

错误原因 #

预构建的CKEditor包（如@ckeditor/ckeditor5-build-classic）内部封装了独立的核心类型，而单独安装的SimpleUploadAdapter依赖的是外部引入的@ckeditor/ckeditor5-core类型，两者的Editor类型属于不同实例，导致TypeScript类型校验不通过。

解决方案 #

方案一：自定义构建CKEditor5（推荐） #

自定义构建可确保所有插件共用同一套核心代码与类型，彻底解决类型冲突：

1. 安装CKEditor5 CLI工具：

   npm install -g @ckeditor/ckeditor5-cli
   

2. 创建自定义ClassicEditor构建：

   ckeditor5 create my-custom-build --type classic
   

3. 进入构建目录，安装SimpleUploadAdapter：

   cd my-custom-build && npm install @ckeditor/ckeditor5-upload
   

4. 修改src/ckeditor.ts，将SimpleUploadAdapter加入内置插件列表：

   import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
   import { SimpleUploadAdapter } from '@ckeditor/ckeditor5-upload';
   // 保留原有默认插件（如Essentials、Paragraph等）
   
   export default class MyEditor extends ClassicEditor {}
   
   MyEditor.builtinPlugins = [
     // 原有插件...
     SimpleUploadAdapter
   ];
   
   MyEditor.defaultConfig = {
     // 原有默认配置...
   };
   

5. 构建自定义编辑器：

   npm run build
   

6. 在Angular项目中引入自定义构建：
   • 将构建后的build/目录复制到Angular项目的assets/文件夹，或通过本地依赖引用
   • 修改组件中的导入路径：

     import * as ClassicEditor from './assets/my-custom-build/build/ckeditor';
     

   • 移除editorConfig中的plugins配置（自定义构建已包含所需插件）

方案二：类型断言快速绕过（临时测试用） #

若仅需临时测试，可通过类型断言绕过TypeScript检查，但存在运行时风险：

import { PluginConstructor } from '@ckeditor/ckeditor5-core';
import { Editor } from '@ckeditor/ckeditor5-editor-classic';

// 修改editorConfig的plugins配置
editorConfig: EditorConfig = {
    plugins:  [SimpleUploadAdapter as unknown as PluginConstructor<Editor>],
    // 其他配置...
};

注意：此方法仅解决编译错误，若预构建包与独立插件存在依赖冲突，运行时仍可能报错。

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