在Angular 4中如何使用CKEditor？解决'dir'属性未定义报错

这个报错我之前碰到过，大概率是表单指令冲突或者CKEditor初始化环节出了问题，咱们一步步来修复：

1. 移除ngModel和formControlName的冲突 #

你在代码里同时用了ngModel="{{ckeditorContent}}"和formControlName="circular_contents"，这是Angular表单的大忌——模板驱动表单（ngModel）和响应式表单（formControlName）不能混用在同一个控件上，这会导致表单状态混乱，直接触发初始化错误。

你需要二选一：

• 如果用响应式表单：删掉ngModel="{{ckeditorContent}}"
• 如果用模板驱动表单：删掉formControlName="circular_contents"

2. 确保CKEditor正确加载 #

检查你的index.html中引入的ckeditor.js路径是否正确，应该指向node_modules里的CKEditor文件：

<script src="node_modules/ckeditor/ckeditor.js"></script>

如果路径不对，CKEditor核心库没加载成功，就会出现初始化时找不到对象的错误。另外，也可以通过angular.json的scripts数组配置加载，更规范：

"scripts": [
  "node_modules/ckeditor/ckeditor.js"
]

3. 修正配置和重复属性 #

你的代码里有两处小问题：

• uiColor: '#99000'颜色值少了一位，应该是#990000
• debounce="500"写了两次，删掉重复的

正确使用示例 #

响应式表单写法（推荐） #

组件类中先初始化表单组：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  circularForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.circularForm = this.fb.group({
      circular_contents: [''] // 初始值可以留空或设置默认内容
    });
  }
}

HTML模板：

<form [formGroup]="circularForm">
  <ckeditor 
    formControlName="circular_contents" 
    [config]="{uiColor: '#990000'}" 
    [readonly]="false" 
    debounce="500">
  </ckeditor>
</form>

模板驱动表单写法 #

组件类定义绑定变量：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  ckeditorContent = ''; // 初始内容
}

HTML模板：

<ckeditor 
  [(ngModel)]="ckeditorContent" 
  [config]="{uiColor: '#990000'}" 
  [readonly]="false" 
  debounce="500">
</ckeditor>

最后检查依赖版本 #

确保ng2-ckeditor和你的Angular版本兼容，比如Angular 12+建议使用ng2-ckeditor@1.x版本，如果版本不匹配也可能出现奇怪的初始化错误。如果还是有问题，可以尝试重新安装依赖：

rm -rf node_modules package-lock.json
npm install
npm install ckeditor ng2-ckeditor --save

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