Creating a custom CKEditor plugin

Short guide to adding your own CKEditor plugin using wysiwyg hooks.

1. First of all, we need to establish a file structure for our plugin

Inside your custom module folder we create a new folder for the plugin

Thus we have an example file structure as such:

my_module.module
my_module.info
my_plugin - our plugin folder

It is good practice to create a separate folder for each editor,
if your site uses multiple editors (eg. my_module/ckeditor/my_plugin)

2. Now we add the hook_wysiwyg_plugin to our file my_module.module.
This will tell the wysiwyg module that it should make our button available to us
in our wysiwyg profile configuration page.
(admin/config/content/wysiwyg/profile/wysiwyg_profile_name/edit)

Remember to activate the button here, to make it available in the CKEditor toolbar.

 function my_module_wysiwyg_plugin($editor, $version) {
 
  switch ($editor) {
   case 'ckeditor':
    return array(
     'my_plugin' => array(
      'path' => drupal_get_path('module', 'my_module') . '/my_plugin',
      'buttons' => array(
       'my_plugin_button' => t('Do something awesome'),
      ),
      'load' => TRUE,
     ),
    );
    break;
  }
 }

3. Now we want to tell CKEditor what to do with our new button.
Add a file in the my_plugin folder called plugin.js and add the javascript code below.
You may also want to add a 16x16 image for the icon used in the CKEditor toolbar.

The real work is done in the exec function. In this example, we simply insert some text whenever the button is activated.

(function($) {
 CKEDITOR.plugins.add( 'my_plugin', {
  init: function( editor )
  {
   editor.addCommand( 'my_command', {
    exec : function( editor ) {
     //here is where we tell CKEditor what to do.
     editor.insertHtml( 'This text is inserted when clicking on our new button from the CKEditor toolbar' );
    }
   });
   
   editor.ui.addButton( 'my_plugin_button', {
    label: 'Do something awesome', //this is the tooltip text for the button
    command: 'my_command',
    icon: this.path + 'images/my_plugin_button.gif'
   });
  }
 });
})(jQuery);

That's it, you're all set.