Create custom plugin with button in CKEditor

Recently I needed to customize the famous CKEditor for one of my projects. The requirement was to add custom text in the source code with the help of a new button added in the CKEditor. Then I searched the net and found some good tutorials. Here I am presenting a collaborative outcome of all the research in term of a simple plugin for adding current time to the source on click of a the button. Here is the working demo...

Live Demo Download Script

Creating new Plugin 

• In the ckeditor/plugins directory create a new directory with the name of your plugin. We are creating 'ckeditor/plugins/showtime'. 
• In this directory add 'plugin.js' file which is the main file for our plugin.

Here is the code for our showtime plugin:

CKEDITOR.plugins.add('showtime',   //name of our plugin
{    
    requires: ['dialog'], //requires a dialog window
    init:function(a) {
  var b="showtime";
  var c=a.addCommand(b,new CKEDITOR.dialogCommand(b));
  c.modes={wysiwyg:1,source:1}; //Enable our plugin in both modes
  c.canUndo=true;

  //add new button to the editor
  a.ui.addButton("showtime",
  {
   label:'Show current time',
   command:b,
   icon:this.path+"showtime.png"
  });
  CKEDITOR.dialog.add(b,this.path+"dialogs/ab.js") //path of our dialog file
 }
});

Create the dialog box For creating the dialog box, follow these steps: Inside 'ckeditor/plugins/showtime' directory add new directory named 'dialogs'. In this directory create a new javascript file with any name. We are naming it as 'ab.js'.

CKEDITOR.dialog.add("showtime",function(e){

 var date=new Date();
 var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');

 var h=date.getHours();
 var nh=h;
 var m=date.getMinutes();
 var s=date.getSeconds();
 var a;
 if(h>12){a="PM"; nh=h-12;}
 if(h<=12){a="AM"; nh=h;}
 
 //Create different time formats
 var t1 = months[parseInt(date.getMonth())]+' '+date.getDate()+" @ " + nh +  ":" + m + " " + a;
 var t2 = date.getFullYear()+'-'+parseInt(date.getMonth()+1) +'-'+date.getDate()+' '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();
 var t3 = date.getHours()+':'+date.getMinutes()+':'+date.getSeconds();

 return {
  title:'Show Time',
  resizable : CKEDITOR.DIALOG_RESIZE_BOTH,
  minWidth:300,
  minHeight:100,
  onShow:function(){ 
  },
  onLoad:function(){ 
    dialog = this; 
    this.setupContent();
  },
  onOk:function(){
  },
  contents:[
  {  id:"info",
    name:'info',
    label:'Tab',
    elements:[

     {
      id : 'format',
      type : 'select',
      label : 'Format',
      accessKey : 'T',
      items :
      [
       [ t1 ],
       [ t2 ],
       [ t3 ]
      ]
     },
     {  
      type:'html',
      html:'<span style="">'+'Select the date format'+'</span>'
     }
    ]
  }
  ],
  buttons:[{
   type:'button',
   id:'okBtn',
   label: 'Set',
   onClick: function(){
      addCode(); //function for adding time to the source
   }
  }, CKEDITOR.dialog.cancelButton],
};

 //function for adding time to the source
 function addCode(){

  //get the value of 'format' field in the 'info' tab of the dialog box
  var t = dialog.getValueOf('info', 'format');
  if(t.length == 0){
   alert('Please select date format.')
   return false;
  }

  var myEditor = CKEDITOR.instances.editor1;

  //insert the time into the HTML source code
  myEditor.insertHtml(t);

  return false;

 };

});

Adding the new button in our CKEditor For adding the new plugin button in the CKEditor, we need to modify the 'config.js' in the root directory of CKEditor. Our 'config.js' looks like:

CKEDITOR.editorConfig = function( config )
{
 config.uiColor = '#AADC6E';

 //Add new button to the editor
 config.toolbar = 'Full';
 config.toolbar_Full =
 [
  { name: 'basicstyles', items : [ 'Bold','Italic','Underline','Source'] },

  { name: 'bibliography', items : [ 'showtime' ] }
 ];
};

Calling our custom plugin in CKEditor: To add our custom plugin in CKEditor, we need to declare this while adding the CKEditor in our HTML page. See the following code:

<form action="sample_posteddata.php" method="post">
  <textarea cols="80" id="editor1" name="editor1" rows="10">Create new plugin with custom button. </textarea>
  <script type="text/javascript">
  //<![CDATA[

   CKEDITOR.replace( 'editor1',
    {
     fullPage : true,
     extraPlugins : 'showtime' //add our plugin to CKEditor
    });

  //]]>
  </script>
</form>