Customize CKEditor5 Toolbar

Adam C. | 4 years ago

In this article, we will learn how to customize CKEditor 5 Toolbar for React App.  

In order to use CKEditor 5, we need two packages:

1. @ckeditor/ckeditor5-react (core ckeditor5 react library)
2. one of ckeditor5 builds, for example: ckeditor5 build classic dna

The example component:

import React, { Component } from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "ckeditor5-build-classic-dna";

class CKEditor5 extends Component {
  render() {
    return (
      <CKEditor
        editor={ClassicEditor}
        data={this.props.value}
        onInit={(editor) => {
          console.log("Editor is ready to use!", editor);
        }}
        onChange={(event, editor) => {
          const data = editor.getData();
          this.props.onChange(data);
          //console.log({ event, editor, data });
        }}
      />
    );
  }
}
export default CKEditor5;

Every CKEditor Build come with a default set of toolbar, as we use ckeditor5-build-classic-dna, the  default set of toolbar includes:

• "heading",
• "bold",
• "italic",
• "link",
• "bulletedList",
• "numberedList",
• "indent",
• "outdent",
• "insertImage",
• “insertImageFromUnsplash”,
• "code",
• "codeBlock",
• "blockQuote",
• "insertTable",
• "mediaEmbed",
• "undo",
• "redo"

Depend on what we need, we could customize the toolbar, by using config attribute, like below:

<CKEditor
        editor={ClassicEditor}
        data={this.props.value}
        config={{
          toolbar: [
            "heading",
            "|",
            "bold",
            "italic",
            "link",
            "bulletedList",
            "numberedList",
            "|",
            "indent",
            "outdent",
            "|",
            "codeBlock",
            "blockQuote",
            "insertTable",
            "mediaEmbed",
            "undo",
            "redo",
          ],
  ...

“|”  is for group divider. And there is one more tool available in ckeditor5-build-classic-dna imageUpload, but in order to use it, we would need to implement a upload adapter to support it. I will have a separate tutorial to go over this.