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.