Post
Ask Question

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.
  1. CKEDITOR.plugins.add('addButton', {  
  2.     init: function(editor) {  
  3.   
  4.         /* Add Button in CKeditor tool bar */  
  5.         editor.ui.addButton('AddnewButton', {  
  6.             label: 'Add New Button',  
  7.             command: 'cmdAddButtonDialog',  
  8.             /*this command invoke function when you click button */  
  9.             icon: this.path + 'add-Button-icon.png' /* path of your icon image*/  
  10.         });  
  11.   
  12.         /* addCommand - Bind our button event with Dialog */  
  13.         editor.addCommand('cmdAddButtonDialog', new CKEDITOR.dialogCommand('addButtonDialog'));  
  14.   
  15.         /*create a DIALOG (addButtonDialog)*/  
  16.         CKEDITOR.dialog.add('addButtonDialog', function(editor) {  
  17.             return {  
  18.                 title: 'Add New Button',  
  19.                 minWidth: 300,  
  20.                 minHeight: 200,  
  21.                 contents: /* tab of dialog*/ [{  
  22.                     id: 'tab1',  
  23.                     label: 'Settings',  
  24.                     elements: [{  
  25.                             type: 'text',  
  26.                             id: 'btnName',  
  27.                             label: 'Button Name: ',  
  28.                             validate: CKEDITOR.dialog.validate.notEmpty("Button Field is Required") /*Add validation for input field*/  
  29.                         },  
  30.                         {  
  31.                             id: "btnIcon",  
  32.                             type: "select",  
  33.                             widths: ["35%", "65%"],  
  34.                             style: "width:90px",  
  35.                             label: 'Button Icon',  
  36.                             "default": "",  
  37.                             items: [  
  38.                                 ['twitter', "fa fa-twitter btn btn-info"],  
  39.                                 ['facebook', "fa fa-facebook btn btn-primary"],  
  40.                                 ['google+', "fa-fa-google-plus btn btn-danger"]  
  41.                             ],  
  42.                             /* select items with name and value*/  
  43.                             validate: CKEDITOR.dialog.validate.notEmpty("Button Icon Field is Required"),  
  44.                         }, {  
  45.                             type: 'text',  
  46.                             id: 'btnLink',  
  47.                             label: 'Link: ',  
  48.                             validate: CKEDITOR.dialog.validate.notEmpty("Link Field is Required")  
  49.                         },  
  50.                     ]  
  51.                 }],  
  52.                 onOk: function() { /*event trigger when click OK Button*/  
  53.                     var dialog = this;  
  54.                     /*Get all input Values*/  
  55.                     var btnName = dialog.getValueOf('tab1', 'btnName');  
  56.                     var btnIconClass = dialog.getValueOf('tab1', 'btnIcon');  
  57.                     var btnLink = dialog.getValueOf('tab1', 'btnLink');  
  58.                     //create Dom Element    
  59.                     var container = new CKEDITOR.dom.element('a');  
  60.                     //insert your dialog fields to 'container'(a)    
  61.                     container.addClass(btnIconClass);  
  62.                     container.setAttribute('href', btnLink)  
  63.                     container.appendText(btnName);  
  64.   
  65.                     //insert Element to Ckeditor content    
  66.                     editor.insertElement(container);  
  67.                 }  
  68.             };  
  69.         }); //dialog end    
  70.     } //init end    
  71. }); //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.
  1. <textarea name="myckeditor "></textarea>  
  2. <script>  
  3. $(document).ready(function() {  
  4.     CKEDITOR.replace('myckeditor');  
  5.     CKEDITOR.config.contentsCss = ['/Assets/bootstrap-4.0.0/css/bootstrap.css',  
  6.         'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'  
  7.     ];  
  8.   
  9.     CKEDITOR.config.extraPlugins = 'addButton';  
  10. });  
  11. </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.
 
 
Next Recommended Reading How To Open SharePoint Application Page In Modal Dialog (Popup) Using JavaScript