ckeditor5 - How do I get toolbar available items in CKEDITOR 5?

Question

I wanted to configure the toolbar in CKEDITOR 5. I took a look at the documentation.

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

Yet, the only script related to my question is:

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

It is way too difficult for a frontend programmer to understand. Where do I put this script? How do I output the results? Is there a detailed tutorial?

Matter fact, it would be nice if CKEDITOR simply put the available items in the documentation. That will save a hell lot of troubles.

Thanks!

score 22 · Accepted Answer

You can put this code right in the body of code samples which you can find e.g. in CKEditor 5 Build's Basic API guide. For example:

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

As @Szymon Cofalik mentioned in his answer – there's no single list of buttons which are available in all builds. CKEditor 5 builds may differ not only visually – they may also contain different plugins and hence different buttons. So, using that code snippet is the safest and future-proof solution.

score 13 · Accepted Answer

you can use console.log( Array.from( editor.ui.componentFactory.names() ) ); which will give you:

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

score 8 · Accepted Answer

Example code you can use to list available toolbar

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()));
    });

score 5 · Accepted Answer

For anyone coming here wondering how to make use of the Array.from(editor.ui.componentFactory.names()) solution (as described in the other answers) in Angular (e.g. Angular 8), here is a description. If you try to do it in ngOnInit or ngAfterViewInit, it is too early and you will get something like Cannot read property 'ui' of null. You need to listen for the ready event from the ckeditor and query the names at that point as follows.

In your component template code, give the editor an id and listen for the ready event:

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

Then in your component typescript code, add a @ViewChild annotation and implement onEditorReady as follows:

@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(', '));
}

You will then see something like this in the console:

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

score 4 · Accepted Answer

It is difficult to keep plugin names in one place in documentation because:

There are multiple builds which differs,
New plugins are developed and added.

If you want to check what toolbar items are available in the build you are currently using, open developer's console in the browser you are using and execute the quoted line of code

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

Of course, editor has to be the editor instance.

I hope this answers your question.

EDIT: Creating editor is described in the documentation too. But you have to assign editor instance to editor variable.

For example:

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

score 3 · Accepted Answer

Adding to @DestinyB answer - perhaps a simpler solution for Vue - just listen for @ready="onReady" on the ckeditor component, and in the onReady method:

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

score 2 · Accepted Answer

Adding to @user2846469 Response, It can be achieved in vue.js simply by the sample below;

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

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

score 0 · Accepted Answer

In React

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()))}} /> 
    }
}

ckeditor5 - How do I get toolbar available items in CKEDITOR 5?

8 回答 8

Related

Reference