Create CKEditor Plugin (Tool Bar Button And Dialog)

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 plugin (toolbar button and dialog).

Need of plugins

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

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

Step 1

Create your Plugin folder

 

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

Step 2

Write script for AddButton plugin

Here is the full code of addButton plugin. Just copy and paste the code inside 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

 

Setp 3

Add plugin to CKEditor

Finally, your plugin is ready to use. Just implement your plugin to 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 CKEditor toolbar.

 

Note

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

 

For more about CKEditor, refer

1. Introduction To CKEditor
2. Add Custom File Uploader in CKEditor