Last updated 30 March 2015. Created on 24 September 2012.
Edited by Elijah Lynn, CChow, judapriest. Log in to edit this page.

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.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

mukeshshukla’s picture

I have followed the same steps and its not working not loading my plugin which i have created. even it is not loading the sample code which is given in the post.
Any one else have faced this kind of problem ?

samuraiSjakkie’s picture

having the same issue. I have created a module in ckeditor and it definitely works there. It just will not load when it is in drupal. Tried it also with the example code and also this does not work.

CChow’s picture

I have updated the example code. Hopefully this works better.

cruno’s picture

Does this also work for the CKEditor module?

arpitr’s picture

I don't think as the mentioned hook is to allow wysiwyg module to register a new plugin. I belive hook_ckeditor_plugin() hook is the hook to tell ckeditor module about you plugin.

Arpit Rastogi

jpoesen’s picture

Regarding the editor breaking when following the given example, adding a trailing slash to the path directory fixed it for me:

...
'path' => drupal_get_path('module', 'my_module') . '/my_plugin/',
...

J.

isramv’s picture

Hi there, I have a working example here: https://github.com/isramv/ckeditor_linkchange