工具栏不显示在ckeditor5解耦-文档使用角

Question

尝试在CKeditor5 decoupled document中使用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>

下面是输出图像，您可以看到，这里没有可见的工具栏。

​

​

Answer 1

唯一需要做的就是在HTML中插入editor.ui.toolbar.element，DOM。

那我们在这里能做什么？当角中的组件准备就绪时，在编辑器元素中追加toolbar.ui DOMElement。

以下代码来自CKEditor5文档。

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

参考文献：文件