How to add custom toolbar field inside ckeditor4-react editor?

Question

I am using "ckeditor4-react" editor to add content for an email. I want to add tokens or tags list in it. Is this possible to add custom token select list inside toolbar.

package link:: https://github.com/ckeditor/ckeditor4-react

Please suggest how can I add custom toolbar select list field inside react ckeditor 4.

score 0 · Answer 1 · answered Jul 13 '22 at 21:23

You can define

  const editorToolbar = [
    {
      name: "basicstyles",
      groups: ["basicstyles", "cleanup"],
      items: [
        "Bold",
        "Italic",
        "Underline",
        "Strike",
        "Subscript",
        "Superscript",
        "-",
        "RemoveFormat",
      ],
    },
    {
      name: "paragraph",
      groups: ["list", "indent", "blocks", "align", "bidi"],
      items: ["NumberedList", "BulletedList", "-", "Outdent", "Indent"],
    },
    { name: "links", items: ["Link", "Unlink"] },
    {
      name: "insert",
      items: ["Image", "SpecialChar"],
    },
  ];

and then use that in config

<CKEditor
   name="editor"
   config={{toolbar: editorToolbar}}
/>

How to add custom toolbar field inside ckeditor4-react editor?

1 Answers1