How to add a custom button to the toolbar that calls a JavaScript function with CKEditor?

Sometimes, we want to add a custom button to the toolbar that calls a JavaScript function with CKEditor.

In this article, we’ll look at how to add a custom button to the toolbar that calls a JavaScript function with CKEditor.

How to add a custom button to the toolbar that calls a JavaScript function with CKEditor?

To add a custom button to the toolbar that calls a JavaScript function with CKEditor, we call the addCommand and addButton methods.

For instance, we write

<textarea id="container"></textarea>

to add a text area.

Then we write

const editor = CKEDITOR.replace("container");

editor.addCommand("mySimpleCommand", {
  exec(edt) {
    alert(edt.getData());
  },
});

editor.ui.addButton("SuperButton", {
  label: "Click me",
  command: "mySimpleCommand",
  toolbar: "insert",
  icon: "https://avatars1.githubusercontent.com/u/5500999?v=2&s=16",
});

to convert the text area to a rich text editor with CKEDITOR.replace.

Then we call addCommand to add a command that calls alert.

Then we call addButton to add a button that issues the mySimpleCommand command.

Conclusion

To add a custom button to the toolbar that calls a JavaScript function with CKEditor, we call the addCommand and addButton methods.