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!

Answer 1

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.

Answer 2

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"]