Get 2024 Templates Mega Bundle!19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets
Get for 99$

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(