Customize CKEditor5 Toolbar
Adam C. |

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

Photo By: Lachlan Donald

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 (
        onInit={(editor) => {
          console.log("Editor is ready to use!", editor);
        onChange={(event, editor) => {
          const data = editor.getData();
          //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:

          toolbar: [

“|”  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.