Bootstrap FreeKB - CKEditor - Customizing the CKEditor toolbar from source
CKEditor - Customizing the CKEditor toolbar from source

Updated:   |  CKEditor articles

This assumes you have created the CKEditor from source. If not, check out my article Install CKEditor 5 using npm from source. If you did, when you pull up the index.html page in one of your web browsers the CKEditor should be displayed. Your web browsers developer tools (F12) should have Editor was initialized. Notice in this example that the CKEditor is very simple, it has only 2 tools, bold and italic.

 

Because app.js has toolbar: [ 'bold', 'italic' ].

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Bold, Italic ],
        toolbar: [ 'bold', 'italic' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

 

Let's say we want to add the heading. The npm list command can be used to list the currently installed packages. Notice in this example that the @ckeditor/ckeditor5-heading package is not listed.

ckeditor@ C:\Users\jerem\VSCode\ckeditor
├── @ckeditor/ckeditor5-basic-styles@42.0.0
├── @ckeditor/ckeditor5-dev-utils@40.2.3
├── @ckeditor/ckeditor5-editor-classic@42.0.0
├── @ckeditor/ckeditor5-essentials@42.0.0
├── @ckeditor/ckeditor5-paragraph@42.0.0
├── @ckeditor/ckeditor5-theme-lark@42.0.0
├── css-loader@5.2.7
├── postcss-loader@4.3.0
├── raw-loader@4.0.2
├── style-loader@2.0.0
├── webpack-cli@4.10.0
└── webpack@5.92.1

 

The npm install command can be used to install the @ckeditor/ckeditor5-heading package.

npm install --save @ckeditor/ckeditor5-heading

 

Let's update app.js to include:

  • import { Heading } from '@ckeditor/ckeditor5-heading';

  • plugins: [ Essentials, Paragraph, Heading, Bold, Italic ],

  • toolbar: [ 'heading', 'bold', 'italic' ]

import { ClassicEditor } from '@ckeditor/ckeditor5-editor-classic';
import { Essentials } from '@ckeditor/ckeditor5-essentials';
import { Paragraph } from '@ckeditor/ckeditor5-paragraph';
import { Bold, Italic } from '@ckeditor/ckeditor5-basic-styles';
import { Heading } from '@ckeditor/ckeditor5-heading';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, Paragraph, Heading, Bold, Italic ],
        toolbar: [ 'heading', 'bold', 'italic' ]
    } )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

 

And let's use the webpack CLI to rebuild the editor.

.\node_modules\.bin\webpack --mode development

 

And when we pull up index.html we should now see the Paragraph tool with headings in the drop down and the web browsers developer tools (F12) should show that the Header plugin/tool is included. Awesome!

 




Did you find this article helpful?

If so, consider buying me a coffee over at Buy Me A Coffee



Comments


Add a Comment


Please enter 83f93f in the box below so that we can be sure you are a human.