Angular 10中CKEditor5 Decoupled Document工具栏不显示问题求助

我来帮你搞定这个问题！你遇到的工具栏不显示问题主要有两个原因：配置语法错误和Decoupled Document构建器的特殊机制，咱们一步步解决：

1. 先修正配置的语法错误 #

你的HTML里工具栏数组的元素之间少了逗号，这会直接导致配置失效：

<!-- 错误写法 -->
<ckeditor [editor]="editor" [config]="{ toolbar: [ 'bold' 'underline'] }"></ckeditor>

<!-- 修正后 -->
<ckeditor [editor]="editor" [config]="{ toolbar: [ 'bold', 'underline'] }"></ckeditor>

2. 处理Decoupled模式的工具栏挂载 #

Decoupled Document构建器的核心设计就是工具栏与编辑区域分离，它不会自动将工具栏插入到DOM中，必须手动完成这一步操作：

修改Component.ts代码 #

添加编辑器就绪事件的处理函数，手动把工具栏元素插入到页面合适位置：

import * as CKEditor from '@ckeditor/ckeditor5-build-decoupled-document';
import { Component } from '@angular/core';

@Component({
  selector: 'app-my',
  templateUrl: './my.component.html',
  styleUrls: ['./my.component.css']
})
export class MyComponent {
  editor = CKEditor;

  // 编辑器就绪时触发该函数
  onEditorReady(editor: any) {
    // 获取编辑区域的父元素，将工具栏插入到编辑区域上方
    const editableElement = editor.ui.getEditableElement();
    editableElement.parentElement.insertBefore(
      editor.ui.view.toolbar.element,
      editableElement
    );
  }
}

修改Component.html代码 #

绑定ready事件到刚才的处理函数：

<ckeditor 
  [editor]="editor" 
  [config]="{ toolbar: [ 'bold', 'underline'] }"
  (ready)="onEditorReady($event)"
></ckeditor>

额外检查 #

确保你已经正确安装了所需依赖，并且版本与Angular 10兼容：

npm install @ckeditor/ckeditor5-angular @ckeditor/ckeditor5-build-decoupled-document --save

这样操作后，工具栏应该就能正常显示啦！

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