如何在 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

很难将插件名称放在文档中的一个位置，因为：

有多个版本不同，
开发并添加了新插件。

如果您想检查当前使用的版本中有哪些工具栏项目可用，请在您使用的浏览器中打开开发人员控制台并执行引用的代码行

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

当然，editor必须是编辑器实例。

我希望这能回答你的问题。

编辑：也在创建编辑器 is described in the documentation。但是您必须将编辑器实例分配给 editor 变量。

例如：

ClassicEditor
    .create( document.querySelector( '#editor' ) )
    .then( editor => {
        window.editor = editor;
        // Or alternatively you could paste that line here and look at console.
    } );

Answer 2

您可以将此代码放在您可以找到的代码示例正文中，例如在 CKEditor 5 Build's Basic API guide。例如：

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

你可以使用 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 5

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

在您的组件模板代码中，为编辑器提供一个 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(', '));
}

然后您将在控制台中看到如下内容：

Available toolbar items: undo, redo, bold, italic, blockQuote, ckfinder, imageTextAlternative, imageUpload, heading, imageStyle:full, imageStyle:side, indent, outdent, link, numberedList, bulletedList, mediaEmbed, insertTable, tableColumn, tableRow, mergeTableCells

Answer 6

添加到 @user2846469 响应中，只需通过下面的示例即可在 vue.js 中实现；

import ClassicEditorfrom '@ckeditor/ckeditor5-build-classic';

export default {
data() {
return {
    editor: ClassicEditor,
    editorData: '',
    editorConfig: {}
 },
 mounted() {
            console.log(this.editor.builtinPlugins.map( plugin => plugin.pluginName ));
        }
 }
}

Answer 7

添加到 @DestinyB - 也许是 Vue 的更简单的解决方案 - 只需在 ckeditor 组件和 onReady 方法中监听 @ready="onReady"：

onReady(event) {
   console.log(Array.from(event.ui.componentFactory.names()));
},

Answer 8

在反应中

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';




export default class AddArticle extends Component {




    
    render() {

        return <CKEditor config={EditorConfig} editor={ClassicEditor} onReady={(event) => {
   console.log(Array.from(event.ui.componentFactory.names()))}} /> 
    }
}

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

How do I get toolbar available items in CKEDITOR 5?

ckeditor5