CKEditor5文本对齐插件失效，报TypeError: Cannot read 'getAttribute' of null

我帮你排查了这个问题，核心原因是直接在预构建的ClassicEditor版本中引入外部插件导致的资源冲突，下面给你详细的分析和解决步骤：

错误原因分析 #

你使用的@ckeditor/ckeditor5-build-classic是官方预打包好的编辑器版本，里面已经包含了固定的插件和配套资源。当你单独引入@ckeditor/ckeditor5-alignment/src/alignment插件时，这个插件依赖的图标资源并没有被包含在预构建包的资源里，导致IconView组件尝试读取图标XML内容时找不到对应资源，从而抛出getAttribute of null的错误。另外，预构建版本的核心模块和单独引入的插件也可能存在版本不一致的兼容性问题。

解决方案 #

方案一：自定义构建CKEditor5（推荐生产环境使用） #

这是CKEditor5官方推荐的方式，你可以创建一个包含Alignment插件的自定义编辑器构建包，确保所有依赖和资源都被正确打包：

1. 先安装构建工具和相关依赖：

npm install --save-dev @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/ckeditor5-dev-utils raw-loader

2. 创建自定义编辑器配置文件（比如ckeditor-custom-build.js）：

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import List from '@ckeditor/ckeditor5-list/src/list';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';

export default class ClassicEditor extends ClassicEditorBase {}

ClassicEditor.builtinPlugins = [
  Essentials,
  Heading,
  List,
  Alignment,
  Undo
];

ClassicEditor.defaultConfig = {
  toolbar: [
    'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo'
  ],
  language: 'zh-cn'
};

3. 配置webpack（如果用Angular CLI，可修改angular.json或自定义webpack配置），将这个自定义构建打包成可用的编辑器模块。

4. 在Angular组件中引入自定义构建的编辑器，替换原来的预构建版本：

import * as ClassicEditor from './path/to/your/ckeditor-custom-build';

方案二：修改现有代码，手动组装编辑器（适合快速测试） #

如果只是想快速验证Alignment插件功能，可以不使用预构建版本，手动引入编辑器核心和所有必要插件：

修改你的Angular组件代码如下：

import { Component, OnInit, OnDestroy, NgZone, ElementRef, ChangeDetectionStrategy, forwardRef } from '@angular/core';
// 替换预构建版本，手动引入编辑器核心和基础插件
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import List from '@ckeditor/ckeditor5-list/src/list';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'ck-editor',
  template: '<textarea></textarea>',
  styleUrls: ['./ck-editor.component.scss'],
  providers: [{ 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => CkEditorComponent), 
    multi: true 
  }],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class CkEditorComponent implements ControlValueAccessor, OnInit, OnDestroy {
  onChange: Function;
  onTouched: Function;
  model: string;
  editor;

  constructor(private ngZone: NgZone, private element: ElementRef) { }

  ngOnInit() {
    ClassicEditor
      // 关键修改：选中组件内的textarea元素，而非整个组件容器
      .create(this.element.nativeElement.querySelector('textarea'), { 
        plugins: [Essentials, Heading, List, Undo, Alignment],
        toolbar: [ 'heading', '|', 'bulletedList', 'numberedList', 'alignment', 'undo', 'redo' ]
      })
      .then(editor => {
        this.editor = editor;
        editor.model.document.on('change', () => {
          if (editor.model.document.differ.getChanges().length > 0) {
            this.ngZone.run(() => this.onChange(editor.getData()));
          }
        });
        editor.model.document.on('blur', () => {
          this.ngZone.run(() => this.onTouched());
        });
        this.editor.setData(this.model ? this.model : '');
      })
      .catch(error => {
        console.error(error);
      });
  }

  ngOnDestroy() {
    if (this.editor) {
      return this.editor.destroy();
    }
  }

  writeValue(value) {
    this.model = value;
    // 新增：当编辑器已初始化时，同步数据
    if (this.editor) {
      this.editor.setData(value || '');
    }
  }

  registerOnChange(fn) {
    this.onChange = fn;
  }

  registerOnTouched(fn) {
    this.onTouched = fn;
  }
}

这里有两个核心修改：

• 不再使用预构建的ClassicEditor，手动引入编辑器核心和所有必要基础插件（Essentials是编辑器运行的必备插件）
• 创建编辑器时，指定组件内的<textarea>元素作为目标，避免将整个组件容器传给编辑器引发DOM问题

额外注意点 #

• 确保所有CKEditor5相关包的版本一致，避免版本不兼容问题，可在package.json中统一指定版本号
• 若使用Angular CLI，可能需要在angular.json中配置允许引入CKEditor5的ES模块，避免编译错误

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