Блог

Пытаюсь использовать CKeditor5 decoupled document in Angular-10 и возникли проблемы с получением панели инструментов

Component.ts

 import * as CKeditor from '@ckeditor/ckeditor5-build-decoupled-document';

export class MyComponent {
    editor = CKeditor
}
 

Component.html

 <ckeditor [editor]="editor" [config]="{ toolbar: [ 'bold' 'underline'] }"></ckeditor>
 

Вот выходное изображение ниже, как вы можете видеть, панель инструментов не видна.

единственное, что вам нужно сделать, это вставить editor.ui.toolbar.element DOM в HTML.

Так что же мы можем здесь сделать? Когда компонент в Angular будет готов, добавьте элемент toolbar.ui DOMElement в элемент editor.

Следующий код взят из документа CKEditor5.

 public onReady( editor ) {
    editor.ui.getEditableElement().parentElement.insertBefore(
        editor.ui.view.toolbar.element,
        editor.ui.getEditableElement()
    );
}
 

Ссылка: Documnt