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.
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;
});
}
}
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);
});