Question

我正在尝试将CKEditor 5添加到我的项目中，但是出了点问题。我需要气球块版本。但是块工具栏没有出现。

我在做什么错了？

import * as BalloonBlockEditor from '@ckeditor/ckeditor5-build-balloon-block';

BalloonBlockEditor
      .create(document.querySelector(`#${this.editorId}`), {
        blockToolbar: [
          'paragraph', 'heading1', 'heading2', 'heading3',
          '|',
          'bulletedList', 'numberedList',
          '|',
          'blockQuote', 'imageUpload'
        ],
      })
      .then(editor => {
        console.log(editor);
      })
      .catch(error => {
        console.error(error);
      });

<div [id]="editorId" class="content-text"></div>

Answer 1

您混合了两种使用CKEditor 5的方式– directly和通过Angular integration。

如果直接在JavaScript中使用它（不带Angular），那么它将起作用（注意更改的导入）：

import BalloonBlockEditor from '@ckeditor/ckeditor5-build-balloon-block';

BalloonBlockEditor
  .create(document.querySelector('#editor'), {
    blockToolbar: [
      'paragraph', 'heading1', 'heading2', 'heading3',
      '|',
      'bulletedList', 'numberedList',
      '|',
      'blockQuote', 'imageUpload'
    ],
  })
  .then(editor => {
    console.log(editor);
  })
  .catch(error => {
    console.error(error);
  });

如果要在Angular中使用它，则需要以不同的方式导入和初始化它：

import * as BalloonBlockEditor from '@ckeditor/ckeditor5-build-balloon-block';

@Component( {
    ...
} )
export class MyComponent {
    public Editor = BalloonBlockEditor;
    ...
}


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

在"Rich text editor component for Angular 2+"指南中了解更多信息。

Answer 2

找到了答案。问题在于集成：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/css.html

CKEditor气球块工具栏不起作用

2 个答案: