Adding a button to the CKEditor toolbar
Hello,
I am using the CKEditor Inline in my Django app, and I would like to add a save button along with other buttons to the toolbar. I tried following the CKEditor docs but i keep having issues with ButtonView, which seems to be necessary for this task. I was able to successfully run:
npm install --save @ckeditor/ckeditor5-ui
, which added the package to the package.json. But, I get an error whenever i try to import ButtonView from the package in my js file like this:
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
If you have any knowledge on how to add a button to the toolbar of a CKEditor, please share! I been working on this for a while and haven't been able to figure it out.
Replies (2)
@Faizairetro bowl This is super helpful—thank you for the detailed guide! Adding a custom button like this is something I’ve been trying to figure out for a while. The step-by-step explanation makes it much easier to follow, especially with the clear examples of where to place the code.
I do have one quick question: if I want the "save" logic to include sending the editor's content via an API call, would I just use editor.getData() in the view.on("execute") section? Or is there a better approach you’d recommend for handling API calls within the plugin?
Thanks again for sharing this!
Hi
To add a custom button to the CKEditor toolbar in CKEditor 5, you need to create a custom plugin. Here's a step-by-step guide to adding a save button:
Inside the new directory, create a savebutton.js file inside your CKEditor plugins directory with the following content:
import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
export default class SaveButtonPlugin extends Plugin {
init() {
const editor = this.editor;
editor.ui.componentFactory.add("saveButton", locale => {
const view = new ButtonView(locale);
view.set({
label: "Save",
icon: "save",
tooltip: true
});
// Execute your save logic here
view.on("execute", () => {
// Add your save logic here, for example:
// console.log("Save button clicked!");
});
return view;
});
}
}In your CKEditor configuration file (e.g., src/ckeditor/ckeditor.js), import and register the custom plugin:
import SaveButtonPlugin from "./plugins/savebutton/savebutton";
ClassicEditor
.create(document.querySelector("#editor"), {
plugins: [
// Other plugins...
SaveButtonPlugin
],
toolbar: {
items: [
// Other toolbar items...
"saveButton"
]
}
})
.then(editor => {
console.log("Editor was initialized", editor);
})
.catch(error => {
console.error(error.stack);
});After adding the custom plugin and registering it in your CKEditor configuration, build your CKEditor bundle using your build tool (e.g., webpack).
Please note that the execute event in the SaveButtonPlugin is where you should place your save logic. This could involve sending the editor's content to your server or triggering any other action you need for saving data.
