I want to create custom plugin in CK editor 5 to to add table template and add a button in toolbar in Html JavaScript.
I have to create custom plugin to add a custom html template directly in ck editor by adding a button in toolbar.
enter image description here
Html File
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.ckeditor.com/ckeditor5/35.0.0/classic/ckeditor.js"></script>
<script src="./custombutton.js"></script>
</head>
<body>
<div id="editor"></div>
<script>
ClassicEditor.create(document.getElementById('editor'), {
extraPlugins: [CustomButton],
})
.then((editor) => {
console.log('Editor is ready');
})
.catch((error) => {
console.error(error);
});
</script>
</body>
</html>
// custombutton.js
class CustomButton extends CKEditorPlugin {
// Declare plugin properties
static get pluginName() {
return 'CustomButton';
}
// Define the button configuration
init() {
const editor = this.editor;
// Create a new button for the p tag
const button = editor.ui.addButton('customButton', {
label: 'Insert Paragraph',
icon: 'fas fa-paragraph', // Assuming you're using Font Awesome icons
command: 'insertParagraph', // Command name for button execution
});
// Register the command for the button
editor.commands.add('insertParagraph', {
// Function to execute when the button is clicked
exec() {
editor.model.change((writer) => {
const paragraph = writer.createElement('p');
writer.insertElement(paragraph);
});
},
});
}
}
// Register the plugin
export default CustomButton;
New contributor
Hitesh Vaghela is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.