Angular12安装CKEditor5(含ckeditor5-image)报SVG解析错误如何解决

• 依赖版本不一致：你安装的@ckeditor/ckeditor5-build-classic是34.1.0版本，单独装的@ckeditor/ckeditor5-image是34.2.0版本，CKEditor5所有官方包要求版本号完全一致，版本差会直接导致依赖引用错乱。
• 插件集成方式错误：npm上的@ckeditor/ckeditor5-build-classic是提前编译好的预构建包，本身不支持直接追加单独安装的插件。单独安装的ckeditor5-image插件自带svg图标、样式资源，没有经过预编译，Angular默认的webpack配置不会处理node_modules下CKEditor包的svg资源，直接触发loader缺失报错。
• 组件代码写法错误：CKEditor的Angular指令要求[editor]属性传入编辑器构造函数，你直接在类属性里调用create()方法提前初始化实例，还直接用原生DOM查询挂载，和Angular的生命周期逻辑完全冲突。

你可以根据自己的需求选下面两种方案，都能解决问题。

方案1：用预构建/自定义构建包（最简单，不需要改webpack配置） #

这个方案不需要折腾构建配置，适合不需要频繁增减插件的场景：

1. 先卸载现有冲突的依赖：

npm uninstall @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-classic @ckeditor/ckeditor5-image

2. 重新安装版本完全对齐的依赖，所有CKEditor包统一用34.2.0版本：

npm install @ckeditor/ckeditor5-angular@4.0.0 @ckeditor/ckeditor5-build-classic@34.2.0

如果你需要AutoImage这类默认构建包没带的插件，不要单独npm安装插件包，直接用CKEditor官方的在线构建工具，勾选你需要的所有图片类插件（AutoImage、ImageInsert、ImageUpload等），下载生成好的自定义构建压缩包，把压缩包内build目录的js文件放到你项目的src/assets/ckeditor目录下即可。
3. 修正组件TS代码，不要提前调用create方法，配置项单独传，不要在初始化构造函数的时候硬写：

// 用自定义构建的话就替换成你本地的文件路径，比如import * as ClassicEditor from 'src/assets/ckeditor/ckeditor'
import * as ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import { Component } from '@angular/core';

@Component({
  selector: 'app-editor-demo',
  templateUrl: './editor-demo.component.html'
})
export class EditorDemoComponent {
  // 直接传构造函数，不要提前调用create
  public Editor = ClassicEditor;
  public editorData = `<p><a href="https://maps.google.co.uk">https://maps.google.co.uk</a></p>`;

  // 编辑器配置单独写，通过config绑定传给指令
  public editorConfig = {
    // 只有当你用的构建包已经内置了AutoImage插件时，才需要在这里加相关配置
    toolbar: ['bold', 'italic', 'imageUpload']
  }
}

4. 修正HTML模板，补上config绑定，去掉多余的原生初始化逻辑：

<ckeditor
  [data]="editorData"
  [editor]="Editor"
  [config]="editorConfig"
  id="classic-editor"
  name="classic-editor">
</ckeditor>

5. 在对应的模块文件里导入CKEditorModule：

import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { NgModule } from '@angular/core';

@NgModule({
  declarations: [EditorDemoComponent],
  imports: [
    // 你项目里的其他模块导入
    CKEditorModule
  ]
})
export class EditorModule { }

方案2：从源码集成，自定义webpack配置（适合需要灵活增减插件的场景） #

如果你需要频繁加CKEditor插件，不想每次都重新下构建包，可以直接改Angular的webpack配置，添加CKEditor需要的资源loader：

1. 第一步先把所有@ckeditor/开头的依赖版本全部对齐到同一个版本号，不能有任何版本差。
2. 安装自定义构建需要的依赖包：

npm install @angular-builders/custom-webpack@12 raw-loader@3 svg-url-loader@7 style-loader@2 css-loader@5 postcss-loader@4 postcss-import postcss-mixins cssnano postcss-sort-media-queries --save-dev

3. 在项目根目录新建custom-webpack.config.js文件，添加CKEditor资源的处理规则：

module.exports = {
  module: {
    rules: [
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        use: ['raw-loader']
      },
      {
        test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
        use: [
          {
            loader: 'style-loader',
            options: {
              injectType: 'singletonStyleTag',
              attributes: {
                'data-cke': true
              }
            }
          },
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  require('postcss-import'),
                  require('postcss-mixins'),
                  require('cssnano')({
                    preset: 'default',
                    plugins: [require('postcss-sort-media-queries')]
                  })
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

4. 修改项目根目录的angular.json配置，把默认的构建、启动执行器换成自定义webpack的执行器，关联刚才写的配置文件：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./custom-webpack.config.js"
      },
      // 这里保留你原来的outputPath、index、main等原有配置，不要删
    }
  },
  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    // 这里保留你原来的browserTarget等原有配置
  }
}

5. 配置完成后，按照方案1里的正确组件写法写业务代码即可，后续可以直接npm安装需要的CKEditor插件，在editorConfig里配置启用，不会再出现svg解析报错。

注意：不管用哪种方案，所有CKEditor相关依赖的版本号必须完全一致，哪怕是小版本差也会导致插件加载失败、编辑器报错。

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