Create CKEditor Plugin (Tool Bar Button And Dialog)

Introduction

CKEditor is a famous HTML editor in JavaScript world. It has thousands of free and paid plugins. These plugins extend the feature of CKEditor. If you know the basic structure and configuration of CKEditor, you are also able to make a plugin (toolbar button and dialog).

Need for plugins

CKEditor gives basic options only. Thus, you need extra features (like handle file uploads) that must create custom plugins.

Here, we will learn to make a simple plugin, add a button link with font-awesome icons.

Step 1

Create your Plugin folder

Create your custom plugin folder inside the Plugins folder. Now, add an icon image for the toolbar button, which must be 16*16 pixels for a perfect fit. Finally, create a plugin.js file to write some logic.

Step 2

Write script for AddButton plugin

Here is the full code of the addButton plugin. Just copy and paste the code inside the plugin.js file. The code commands are explained, which explains how this code workes.

CKEDITOR.plugins.add('addButton', {
init: function(editor) {
/* Add Button in CKeditor tool bar */
editor.ui.addButton('AddnewButton', {
label: 'Add New Button',
command: 'cmdAddButtonDialog',
/*this command invoke function when you click button */
icon: this.path + 'add-Button-icon.png' /* path of your icon image*/
});
/* addCommand - Bind our button event with Dialog */
editor.addCommand('cmdAddButtonDialog', new CKEDITOR.dialogCommand('addButtonDialog'));
/*create a DIALOG (addButtonDialog)*/
CKEDITOR.dialog.add('addButtonDialog', function(editor) {
return {
title: 'Add New Button',
minWidth: 300,
minHeight: 200,
contents: /* tab of dialog*/ [{
id: 'tab1',
label: 'Settings',
elements: [{
type: 'text',
id: 'btnName',
label: 'Button Name: ',
validate: CKEDITOR.dialog.validate.notEmpty("Button Field is Required") /*Add validation for input field*/
},
{
id: "btnIcon",
type: "select",
widths: ["35%", "65%"],
style: "width:90px",
label: 'Button Icon',
"default": "",
items: [
['twitter', "fa fa-twitter btn btn-info"],
['facebook', "fa fa-facebook btn btn-primary"],
['google+', "fa-fa-google-plus btn btn-danger"]
],
/* select items with name and value*/
validate: CKEDITOR.dialog.validate.notEmpty("Button Icon Field is Required"),
}, {
type: 'text',
id: 'btnLink',
label: 'Link: ',
validate: CKEDITOR.dialog.validate.notEmpty("Link Field is Required")
},
]
}],
onOk: function() { /*event trigger when click OK Button*/
var dialog = this;
/*Get all input Values*/
var btnName = dialog.getValueOf('tab1', 'btnName');
var btnIconClass = dialog.getValueOf('tab1', 'btnIcon');
var btnLink = dialog.getValueOf('tab1', 'btnLink');
//create Dom Element
var container = new CKEDITOR.dom.element('a');
//insert your dialog fields to 'container'(a)
container.addClass(btnIconClass);
container.setAttribute('href', btnLink)
container.appendText(btnName);
//insert Element to Ckeditor content
editor.insertElement(container);
}
};
}); //dialog end
} //init end
}); //plugin.add end

Step 3

Add plugin to CKEditor

Finally, your plugin is ready to use. Just implement your plugin to the CKEditor page and use config.extraPlugins.

Here, we will add bootstrap.css and font-awesome.css for button style and icons.

<textarea name="myckeditor "></textarea>
<script>
$(document).ready(function() {
CKEDITOR.replace('myckeditor');
CKEDITOR.config.contentsCss = ['/Assets/bootstrap-4.0.0/css/bootstrap.css',
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'
];
CKEDITOR.config.extraPlugins = 'addButton';
});
</script>

We can get our plugin icon in the CKEditor toolbar.

Note

This button style and icon depends on Bootstrap and font-awesome. Thus, you must include these two files on your target page.

For more about CKEditor, refer