Angular13集成CKEditor5 Placeholder插件报SVG解析错误配置咨询

在Angular 13项目中使用CKEditor5自定义构建版本实现官方示例的"Placeholder"插件时，应用运行过程中抛出编译错误。已知官方文档要求在webpack配置中添加raw-loader规则处理CKEditor5相关SVG图标文件，但Angular 13默认不暴露webpack.config.json文件，无法直接按照官方说明修改配置。

编译报错信息 #

Compiled with problems:X

ERROR in ./node_modules/@ckeditor/ckeditor5-core/theme/icons/three-vertical-dots.svg 1:0

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
> <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="9.5" cy="4.5" r="1.5"/><circle cx="9.5" cy="10.5" r="1.5"/><circle cx="9.5" cy="16.5" r="1.5"/></svg>

业务代码片段 #

import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CKEditorUploadAdapter } from 'src/app/_helpers/ckeditor-upload-adapter';
import { ConferenceViewModelWithDetails, PaperAcknowledgementViewModel, PaperConfigurationViewModel } from 'src/app/_models/generatedModels';
import { AuthenticationService } from 'src/app/_services/authentication.service';
import { AdminCallForPapersService, OrganizationService } from 'src/app/_services/generatedServices';
import { ToasterService } from 'src/app/_services/toaster.service';
import * as customBuild from 'src/ckCustomBuild/ckeditor';
import * as Placeholder from 'src/ckCustomBuild/placeholder.plugin';


@Component({
  selector: 'bxl-abstract-management-configuration',
  templateUrl: 'abstract-management-configuration.component.html',
})
export class AbstractManagementConfigurationComponent implements OnInit {
  initialized = false;
  public Editor = customBuild;

  htmlEditorConfig = {
    plugins: [Placeholder],
    toolbar: {
      items: ['bold', 'italic', 'underline', 'link', 'alignment', 'bulletedList', 'numberedList', '|', 'fontFamily', 'fontSize', 'fontColor', 'fontBackgroundColor', '|', 'Paceholder'],
      shouldNotGroupWhenFull: false,
    },
    placeholderConfig: {
      types: ['date', 'color', 'first name', 'surname'],
    },
    fontSize: {
      options: [9, 11, 13, 'default', 17, 19, 21],
    },
    mediaEmbed: {
      previewsInData: true,
    },
  };

官方给出的webpack配置参考 #

module: {
    rules: [
        {
            test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
            use: [ 'raw-loader' ]
        },

不需要eject Angular内置的webpack配置，按以下步骤操作即可修复问题：

• 安装依赖
  执行以下命令安装自定义webpack构建工具，以及CKEditor5资源加载所需的loader：

  npm install -D @angular-builders/custom-webpack raw-loader style-loader css-loader postcss-loader
  

• 新增自定义webpack配置文件
  在项目根目录（与angular.json文件同级）新建ckeditor-webpack.config.js文件，写入以下配置：

  module.exports = {
    module: {
      rules: [
        {
          test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
          use: ['raw-loader']
        },
        {
          test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
          use: ['style-loader', 'css-loader', 'postcss-loader']
        }
      ]
    }
  };
  

• 修改angular.json构建配置
  1. 找到项目的build配置节点，将原有builder值@angular-devkit/build-angular:browser替换为@angular-builders/custom-webpack:browser，在options节点下新增配置，指向刚才创建的自定义webpack文件：

  "customWebpackConfig": {
    "path": "./ckeditor-webpack.config.js",
    "mergeRules": { "module": { "rules": "prepend" } }
  }
  

  2. 找到项目的serve配置节点，将原有builder值@angular-devkit/build-angular:dev-server替换为@angular-builders/custom-webpack:dev-server，其余配置保持默认即可。
• 修复代码笔误
  组件内编辑器配置的toolbar项存在拼写错误，将'Paceholder'改为'placeholder'，否则插件加载完成后工具栏不会显示对应功能按钮。

所有修改完成后重启本地开发服务，编译报错会自动消失，Placeholder插件可正常加载使用。

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