[Drupal] How to create a custom plugin for CKEditor in Drupal 6?

Adding extra plugins to the CKEditor is like extending Drupal by installing new modules. Plugins can be used to add more functionalities to the CKEditor. In this article I will be explaining how to create a simple custom plugin and how to configure it in Drupal 6.

My custom plugin in this article adds a separate class for the text selected. You can define the styles in your css.

The steps to be followed are:

• We need to create a folder for the plugin say, 'my_plugin' (the plugin name) in sites/all/modules/ckeditor/plugins and create a plugin.js file.
• It is in this plugin.js file, that we are going to write the code (the logic to work).
• You can add the icon of the plugin to inside an image folder (16px X 16px is suitable).

The below code creates a p element with a class "my_class" and adds it to the selected text in the editor.

CKEDITOR.plugins.add( 'my_plugin', {
  init: function( editor ) {
    editor.addCommand( 'my_plugin', {
      exec : function( editor ) {
        var selected_text = editor.getSelection().getSelectedText(); 
	var newElement = new CKEDITOR.dom.element("p");              
	newElement.setAttributes({class: 'my_class'})
	newElement.setText(selected_text); 
	editor.insertElement(newElement);                            
      }
    });
    editor.ui.addButton( 'my_button, {
      label: 'Here is my plugin',
      command: 'my_plugin,
      icon: this.path + 'images/my_icon.png'
    });
  }
});

In order to enable the plugin in CKEditor 3,

• Open the file ckeditor.config.js in sites/all/modules/ckeditor.
• Choose the toolbar we want to insert the plugin button. The are 3 by default. It is an array of available plugins (Buttons).
• Append our button name (my_button) to the end of the array.

In order to enable the plugin in CKEditor 4,

• Open the ckeditor configuration page (../admin/settings/ckeditor)
• Click the profile for which you need to enable this (../admin/settings/ckeditor/edit/Advanced or Default)
• Click on the “Editor Appearance” tab
• The plugin button we have created will be there in the "All buttons", drag the button to the used buttons and also enable the plugin in "plugins" field.

Hope this helps.