Angular 15中禁用CKEditor报错：this.editorInstance.enableReadOnlyMode不是函数

问题场景 #

在Angular15应用中，尝试通过表单控件的disable()方法禁用CKEditor时触发报错。

相关代码 #

• HTML代码：

<ckeditor formControlName="content" [editor]="Editor" [config]="ckConfig" required></ckeditor>

• TypeScript代码：

this.form.controls['content'].disable();

报错信息 #

"this.editorInstance.enableReadOnlyMode is not a function"

解决方案 #

1. 等待编辑器初始化完成后执行禁用操作 #

CKEditor组件需完成初始化才能生成可用实例，直接调用表单disable()可能时机过早。通过监听ready事件确保实例就绪：
修改HTML：

<ckeditor formControlName="content" [editor]="Editor" [config]="ckConfig" required (ready)="onEditorReady($event)"></ckeditor>

组件TS中添加回调：

onEditorReady(editor: any) {
  this.form.controls['content'].disable();
}

2. 直接操作编辑器实例设置只读模式 #

绕过表单控件disable()的兼容问题，直接通过编辑器实例的isReadOnly属性控制状态：
先在组件中定义变量存储实例：

private editorInstance: any;

在ready事件中赋值并设置只读：

onEditorReady(editor: any) {
  this.editorInstance = editor;
  // 设置为禁用（只读）状态
  this.editorInstance.isReadOnly = true;
  // 恢复启用执行：this.editorInstance.isReadOnly = false;
}

3. 检查CKEditor版本兼容性 #

确保@ckeditor/ckeditor5-angular与CKEditor5核心构建包（如@ckeditor/ckeditor5-build-classic）版本匹配，版本不兼容会导致方法缺失。可统一升级到官方推荐的兼容版本。

4. 兼容表单状态与编辑器状态 #

如果需要同时维护表单控件状态和编辑器状态，可封装方法统一处理：

toggleEditorDisabled(isDisabled: boolean) {
  const contentControl = this.form.controls['content'];
  isDisabled ? contentControl.disable() : contentControl.enable();
  if (this.editorInstance) {
    this.editorInstance.isReadOnly = isDisabled;
  }
}

调用时传入true（禁用）或false（启用）即可同步两种状态。

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