Панель инструментов CKEditor Balloon Block не работает

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

Нашел ответ.Проблема была с интеграцией: https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/css.html

Answer 2

Вы перепутали два способа использования CKEditor 5 - напрямую и через Угловая интеграция .

Если вы использовали его напрямую, в 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 для Angular 2 +" .