Angular 15中CKEditor 5工具栏配置异常求助

问题描述 #

我想在Angular应用中配置出如下样式的CKEditor工具栏：

我先尝试了以下配置：

config = { toolbar: [ 'Cut', 'Copy', 'PasteText', '|', 'Undo', 'Redo', '|', 'Bold', 'Italic', 'Underline', 'Strike' , 'superscript', 'subscript', '|', 'link' ] }

对应的模板代码：

<ckeditor [editor]="Editor" [config]="config" data="<p>Hello, world!</p>"></ckeditor>

得到的工具栏效果如下：

之后我用工具栏配置工具生成了配置，改成对象形式：

config = {
    toolbarGroups: [
        { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
        { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
        { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
        { name: 'forms', groups: [ 'forms' ] },
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'links', groups: [ 'links' ] },
        { name: 'insert', groups: [ 'insert' ] },
        '/',
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
        { name: 'tools', groups: [ 'tools' ] },
        { name: 'others', groups: [ 'others' ] },
        { name: 'about', groups: [ 'about' ] }
    ],

    removeButtons: 'Source,Save,Templates,NewPage,Preview,Print,Paste,PasteFromWord,Replace,Find,SelectAll,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,About,Maximize,ShowBlocks,BGColor,TextColor,Styles,Format,Font,FontSize,Iframe,PageBreak,SpecialChar,HorizontalRule,Table,Flash,Unlink,Anchor,Image,BidiLtr,BidiRtl,JustifyRight,Language,JustifyBlock,JustifyCenter,JustifyLeft,CreateDiv,Indent,BulletedList,NumberedList,Outdent,CopyFormatting,RemoveFormat'
}

但最终显示的还是默认工具栏，求解决方法。

解决方案 #

1. 明确CKEditor版本差异 #

CKEditor 4和CKEditor 5的配置语法完全不兼容，你使用的工具栏配置工具是针对CKEditor 4的，而Angular中常用的@ckeditor/ckeditor5-angular集成的是CKEditor 5，这是配置失效的核心原因。

2. CKEditor 5的正确配置步骤 #

CKEditor 5采用插件化架构，必须先安装对应功能的插件，再通过toolbar数组指定按钮：

步骤一：安装所需插件

针对你需要的功能，执行以下命令安装插件：

npm install @ckeditor/ckeditor5-clipboard @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-link @ckeditor/ckeditor5-undo

步骤二：组件中导入编辑器与插件

import { Component } from '@angular/core';
import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
// 导入所需插件
import { Clipboard } from '@ckeditor/ckeditor5-clipboard';
import { Bold, Italic, Underline, Strike, Subscript, Superscript } from '@ckeditor/ckeditor5-basic-styles';
import { Link } from '@ckeditor/ckeditor5-link';
import { Undo } from '@ckeditor/ckeditor5-undo';

@Component({
  selector: 'app-ckeditor-demo',
  templateUrl: './ckeditor-demo.component.html'
})
export class CkeditorDemoComponent {
  public Editor = ClassicEditor;
  public config = {
    // 声明要启用的插件
    plugins: [ Clipboard, Bold, Italic, Underline, Strike, Subscript, Superscript, Link, Undo ],
    // 配置工具栏按钮，注意CKEditor 5的按钮名称为小写
    toolbar: [
      'cut', 'copy', 'pasteText', '|',
      'undo', 'redo', '|',
      'bold', 'italic', 'underline', 'strike', 'subscript', 'superscript', '|',
      'link'
    ]
  };
}

步骤三：模板代码保持不变

<ckeditor [editor]="Editor" [config]="config" data="<p>Hello, world!</p>"></ckeditor>

3. 问题原因分析 #

• 初始配置中，CKEditor 5对按钮名称大小写敏感，你使用的Cut、Copy等大写名称不被识别，导致按钮不显示。
• 后续使用的toolbarGroups和removeButtons是CKEditor 4的专属配置，CKEditor 5不支持，因此会自动回退到默认工具栏。

4. 验证效果 #

启动Angular应用后，工具栏将显示你需要的按钮组，与目标样式一致。

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