Create CKeditor Plugin

Folder Structure

Before we can create a plugin, we must first understand the folder structure of a plugin.

  • mypluginname/ - this folder name is also the name of your plugin
    • icons/
      • mypluginname.png - (16x16 png image)
      • hidpi/    - higher resolution for hi-density displays
        • mypluginname.png - (32x32 png image)
    • plugin.js  - ckeditor expects to find a plugin.js file

 

Register Your Plugin

In order to make CKEditor aware of your plugin the add method of CKeditor.plugin is used to register your plugin.
The plugin definition is configuration object who's properties and methods can be seen here.

plugin.js Source Code
plugin.js is the heart of your plugin. It contains the javascript code for the plugin.
 

CKEDITOR.plugins.add( 'mypluginname', {
    icons: 'mypluginname',
    init: function( editor ) {
        //Plugin logic goes here.
    }
});

Editor Command

Now that we have the skeleton for our plugin. We need a way to define actions that our plugin can perform. Commands are used to define actions that our plugin can perform. The commands should be written in the init function of the plugin definition we defined above. The CKEDITOR.editor.addCommand is used to add commands.

//create a new command called "insertTimespace"
//the editor object will be passed in via the init function
editor.addCommand( 'insertTimestamp', {
    exec: function( editor ) {
        var now = new Date();
        //insert the value into the editor at cursor position
        editor.insertHtml( 'The current date and time is: ' + now.toString() + '' );
    }
});

Add Plugin To UI(Toolbar)

At this point we have a plugin that is functional. However we need a way for the user to interact with our plugin and run the commands. One way to do that is to add a button to the toolbar of ckeditor that the user can click. When the button is clicked, it will run our "insertTimestamp" command which will insert the timestamp into the editor. This can be done via the addButton method of the CKEditor.ui object.

//this should be added to the init function of the plugin definition as well.
//the editor object will be passed in via the init function.
editor.ui.addButton( 'Timestamp', {
    label: 'Insert Timestamp',
    command: 'insertTimestamp',
    toolbar: 'insert'
});

Full Source Code

The complete content of the plugin.js file looks as follows:

CKEDITOR.plugins.add( 'mypluginname', {
  icons: 'mypluginname',
  init: function( editor ) {
    editor.addCommand( 'insertTimestamp', {
      exec: function( editor ) {
        var now = new Date();
        //insert the value into the editor at cursor position
        editor.insertHtml( 'The current date and time is: ' + now.toString() + '' );
      }
    });
    editor.ui.addButton( 'Timestamp', {
      label: 'Insert Timestamp',
      command: 'insertTimestamp',
      toolbar: 'insert'
    });
}
});
Cookbook Category: 

Add new comment

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.