Angular中为@ckeditor/ckeditor5-angular添加插件报错求助

嘿，这个问题我之前踩过坑！你直接给ClassicEditor.builtinPlugins赋值成[Alignment]的操作有问题——官方的ClassicEditor构建本身自带了一堆核心插件（比如编辑器基础结构、段落处理、工具栏组件这些），你把它覆盖成只包含Alignment的话，那些维持编辑器正常运行的核心插件都没了，编辑器初始化时找不到必要的DOM元素，就会抛出TypeError: Cannot read property 'getAttribute' of null这个错误。

下面给你两种正确的解决方法：

方法1：合并原有插件与新插件 #

不要直接覆盖builtinPlugins，而是用concat或者扩展运算符把Alignment插件加到原有插件列表里：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

export class YourEditorComponent {
  // 保留编辑器实例引用
  public Editor = ClassicEditor;
  // 配置编辑器
  public editorConfig = {
    // 合并原有内置插件和新插件
    plugins: ClassicEditor.builtinPlugins.concat([Alignment]),
    toolbar: [
      // 务必把Alignment按钮加到工具栏，不然看不到功能
      'alignment',
      // 保留你原来需要的工具栏按钮
      'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'
    ]
  };
}

方法2：直接在配置中声明所有插件（更推荐） #

其实就是你提到的“修改CKEditor配置可正常生效”的方式，直接在editorConfig的plugins字段里组合原有插件和新插件，这种方式不会改动编辑器的内置插件集合，更稳妥：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

export class YourEditorComponent {
  public Editor = ClassicEditor;
  public editorConfig = {
    // 用扩展运算符展开原有插件，再添加Alignment
    plugins: [...ClassicEditor.builtinPlugins, Alignment],
    toolbar: [
      'alignment',
      'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote'
    ]
  };
}

关键提醒 #

不管用哪种方法，都必须把alignment加到工具栏配置里，否则插件虽然安装成功，但你在编辑器界面上看不到对齐功能的按钮。

本质原因就是：直接覆盖builtinPlugins会丢失编辑器运行必需的核心插件，导致初始化失败，DOM元素未正确创建，进而触发读取null属性的错误。通过合并插件列表的方式，既能保留原有功能，又能添加新插件。

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