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 (1)
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.
ReUI
Open-source React components, blocks and templates built on shadcn/ui and Tailwind CSS by Keenthemes.
