Angular 应用中的自定义 CKEditor 构建不显示工具栏

Question

我正在尝试在我的 Angular 应用程序中实现 CKEditor 的自定义构建，但工具栏显示为空，如下所示：

除此之外，它工作得很好，例如我可以按 CMD+B，所选文本变为粗体。

我导入了模块，在我的组件中定义了如下编辑器

import * as Editor from '../../../../assets/ckeditor/build/ckeditor.js';

export class MyComponent {
  Editor = Editor
}

并将其添加到我的模板中，如下所示：

<ckeditor [editor]="Editor" formControlName="description"></ckeditor>

我在这里错过了什么？

Answer 1

好的，我明白了。我必须明确传递我可以从 sample/index.html 文件复制的配置：

import * as Editor from '../../../../assets/ckeditor/build/ckeditor.js';
// ...

export class MyComponent {
    // ...
    Editor = Editor;
    config = {

        toolbar: {
            items: [
                'heading',
                '|',
                'bold',
                'italic',
                'link',
                'bulletedList',
                'numberedList',
                '|',
                'indent',
                'outdent',
                '|',
                'blockQuote',
                'insertTable',
                'undo',
                'redo'
            ]
        },
        language: 'en',
        table: {
            contentToolbar: [
                'tableColumn',
                'tableRow',
                'mergeTableCells'
            ]
        },
        licenseKey: '',

    }
// ...
}

并在模板中：

<ckeditor [editor]="Editor" [config]="config" formControlName="message"></ckeditor>

这是一个官方构建不需要的步骤，只有自定义构建才需要。

Angular 应用中的自定义 CKEditor 构建不显示工具栏

Custom CKEditor build in Angular app doesn't show toolbar

ckeditor

angular