CODEWITHSUNDEEP
ckeditor5
stonyau
stonyau

Reputation: 2172

How do I get toolbar available items in CKEDITOR 5?

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!

Upvotes: 28

Views: 39262

Answers (9)

kheya
kheya

Reputation: 7622

This is what I get for ClassicEditor [ "selectAll", "undo", "redo", "bold", "italic", "blockQuote", "uploadImage", "imageUpload", "heading", "imageTextAlternative", "toggleImageCaption", "imageStyle:inline", "imageStyle:alignLeft", "imageStyle:alignRight", "imageStyle:alignCenter", "imageStyle:alignBlockLeft", "imageStyle:alignBlockRight", "imageStyle:block", "imageStyle:side", "imageStyle:wrapText", "imageStyle:breakText", "indent", "outdent", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells" ]

Upvotes: 0

Bambier
Bambier

Reputation: 846

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

Upvotes: 2

Anoiny
Anoiny

Reputation: 386

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

Upvotes: 3

Destiny Brotobor
Destiny Brotobor

Reputation: 108

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

Upvotes: 2

user2846469
user2846469

Reputation: 2220

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

Upvotes: 6

Reinmar
Reinmar

Reputation: 22023

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.

Upvotes: 27

Dirk J. Faber
Dirk J. Faber

Reputation: 4701

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

Upvotes: 20

Izhari Ishak Aksa
Izhari Ishak Aksa

Reputation: 898

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

Upvotes: 8

Szymon Cofalik
Szymon Cofalik

Reputation: 1160

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

Upvotes: 4

Related Questions