Angular10集成CKEditor5添加Alignment插件编译报错如何解决

报错的核心原因有两个：

• 你安装的@ckeditor/ckeditor5-build-classic是官方提前预编译打包好的成品构建，这类构建的插件列表在打包阶段就已经固化，不支持运行时直接追加导入src目录下的未编译原生插件。
• 单独从源码路径导入的Alignment插件，内部依赖了svg图标、css样式文件，这些资源不在Angular CLI默认的文件解析规则覆盖范围内，构建时无法识别svg文件的语法，就会抛出你看到的Unexpected token解析错误。

推荐使用自定义构建的方式解决，稳定性最高，不会出现兼容问题，操作步骤如下：

1. 确认所有CKEditor相关依赖版本完全一致，你当前安装的三个包都是34.2.0，符合要求，后续新增其他CKEditor插件也要保持版本号统一，避免兼容问题。
2. 在项目src目录下新建自定义编辑器构建文件，比如命名为ckeditor-custom-build.ts，写入以下代码：

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
// 导入基础插件
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
import BlockQuote from '@ckeditor/ckeditor5-block-quote/src/blockquote';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Image from '@ckeditor/ckeditor5-image/src/image';
import ImageCaption from '@ckeditor/ckeditor5-image/src/imagecaption';
import ImageStyle from '@ckeditor/ckeditor5-image/src/imagestyle';
import ImageToolbar from '@ckeditor/ckeditor5-image/src/imagetoolbar';
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';
import Link from '@ckeditor/ckeditor5-link/src/link';
import List from '@ckeditor/ckeditor5-list/src/list';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import PasteFromOffice from '@ckeditor/ckeditor5-paste-from-office/src/pastefromoffice';
import TextTransformation from '@ckeditor/ckeditor5-typing/src/texttransformation';
// 导入对齐插件
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';

export default class CustomClassicEditor extends ClassicEditorBase {}

// 注册所有需要的插件
CustomClassicEditor.builtinPlugins = [
  Essentials,
  Bold,
  Italic,
  BlockQuote,
  Heading,
  Image,
  ImageCaption,
  ImageStyle,
  ImageToolbar,
  ImageUpload,
  Link,
  List,
  Paragraph,
  PasteFromOffice,
  TextTransformation,
  Alignment
];

// 可预先配置默认工具栏，后续在组件中也可覆盖配置
CustomClassicEditor.defaultConfig = {
  toolbar: {
    items: [
      'heading',
      '|',
      'bold', 'italic', 'link',
      'bulletedList',
      'numberedList',
      '|',
      'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify',
      'imageUpload',
      'blockQuote',
      'undo',
      'redo'
    ]
  }
};

3. 在需要使用编辑器的Angular组件中，不再导入官方预编译的@ckeditor/ckeditor5-build-classic，改为导入你刚写的自定义构建文件：

import CustomClassicEditor from './ckeditor-custom-build'; // 路径按你的实际存放位置调整

4. 组件内的配置对象不需要再写plugins字段，直接传入工具栏等配置即可，Angular CLI会自动处理所有CKEditor源码内的svg、css资源，不会再出现解析错误。

不推荐使用自定义webpack配置追加loader的方式适配，这种方式需要替换Angular默认构建器，后续版本升级很容易出现兼容问题，维护成本极高。

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