如何在CKEDITOR 5中获得工具栏可用项目？

Question

我想在CKEDITOR 5中配置工具栏.我看了一下文档.

https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/builds/guides/integration/configuration.html

然而,与我的问题相关的唯一脚本是:

Array.from( editor.ui.componentFactory.names );

前端程序员很难理解.我在哪里放这个脚本？如何输出结果？有详细的教程吗？

事实上,如果CKEDITOR只是将可用的项目放在文档中,那就太好了.这将节省很多麻烦.

谢谢!

Answer 1

你可以使用console.log( Array.from( editor.ui.componentFactory.names() ) );它会给你：

["undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading", "imageStyle:full", "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"]

Answer 2

您可以将此代码放在代码示例的正文中,您可以在CKEditor 5 Build的Basic API指南中找到它们.例如:

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        console.log( Array.from( editor.ui.componentFactory.names() ) );
    } )
    .catch( error => {
        console.error( error );
    } );

正如@Szymon Cofalik在他的回答中提到的 - 所有版本中都没有单个按钮列表.CKEditor 5版本可能不仅在视觉上有所不同 - 它们也可能包含不同的插件,因此也包含不同的按钮.因此,使用该代码段是最安全且面向未来的解决方案.

Answer 3

可用于列出可用工具栏的示例代码

var editor = ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['headings', 'bold', 'italic', 'link', 'bulletedList', 'numberedList'],
        heading: {
            options: [
                {modelElement: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph'},
                {modelElement: 'heading1', viewElement: 'h1', title: 'Heading 1', class: 'ck-heading_heading1'},
                {modelElement: 'heading2', viewElement: 'h2', title: 'Heading 2', class: 'ck-heading_heading2'},
                {modelElement: 'heading', viewElement: 'h3', title: 'Heading 3', class: 'ck-heading_heading3'}
            ]
        }
    })
    .then(function (editor) {
        console.log(Array.from(editor.ui.componentFactory.names()));
    });

Answer 4

对于来到这里想知道如何使用Array.from(editor.ui.componentFactory.names())Angular（例如 Angular 8）中的解决方案（如其他答案中所述）的任何人，这里有一个描述。如果您尝试在ngOnInit或 中执行此操作ngAfterViewInit，则为时过早，您会得到类似Cannot read property 'ui' of null. 您需要ready从 ckeditor侦听事件并查询此时的名称，如下所示。

在你的组件模板代码中，给编辑器一个 id 并监听 ready 事件：

<ckeditor
    #editor
    [editor]="Editor"
    [config]="config"
    (ready)="onEditorReady($event)">
</ckeditor>

然后在你的组件打字稿代码中，添加一个@ViewChild注解并实现onEditorReady如下：

@ViewChild('editor', {static: false})
editorComponent: CKEditorComponent;

onEditorReady(event: any): void {
    const toolbarItems = Array.from(this.editorComponent.editorInstance.ui.componentFactory.names());
    console.log('Available toolbar items: ' + toolbarItems.join(', '));
}

然后，您将在控制台中看到类似的内容：

可用的工具栏项目：撤消、重做、粗体、斜体、blockQuote、ckfinder、imageTextAlternative、imageUpload、heading、imageStyle:full、imageStyle:side、indent、outdent、link、numberedList、bulletedList、mediaEmbed、insertTable、tableColumn、tableRow、mergeTableCells