Developing CKEditor Plugins

These are the ready made contributed modules that you can install like any other Drupal module. More info can be found in the modules README file.

It simply means downloading (plugin.js, icon) the contributed modules from the CKEditor project and add a custom module in Drupal to integrate it. Luckily Drupal provides a very nice simple API to do it.

Here the actual functionality is written in the contributed plugin.js file, and our task here is to attach this file to CKEditor using a Custom Drupal Module and add a button (using its image) in the toolbar of the CKEditor.

This is a three phase process and explained below in details.

1. Download Plugin JS files

Download the src files of the CKEditor plugin, for example https://download.ckeditor.com/preview/releases/preview_4.14.0.zip. This module preview the content of CKEditor. Extract it to web/libraries/preview.

2. Create a Custom Drupal Module

Create a custom module like any other Drupal module. The directory structure is given below.

The class PreviewCKEditorButton should implement three methods:

a. getButtons() : Which actually shows the button on toolbar

b. getFile() : Attaches the plugin.js file

c. getConfig(Editor $editor) : If there are any configurations to be saved in database.

And that's it :)

3. Install and configure

Now you need to enable the module and then goto Text formats settings and configure any format, you will see the button, just drag it to the toolbar. Go to content and see the button in action.

To download the source code from local server:

ssh://ali@g10:2222/home/ali/repos/modules/ckeditor_preview

In this method we develop the functionality of the button in plugin.js file and then create a custom Drupal module to attach it to the Drupal CKEditor instance.

One difference between this method and method 2 would be that the library files exists inside the Custom Drupal module now as shown below.

We have a very simple module here Timestamp and as the name indicates it insert the current date and time in the CKEditor. The code is self explanatory:

/**
 * Basic sample plugin inserting current date CKEditor editing area.
 */
(function ($, Drupal, CKEDITOR) {
  // Register the plugin within the editor.
  CKEDITOR.plugins.add("timestamp", {
    // Register the icons. They must match command names.
    icons: "timestamp",
    // The plugin initialization logic goes inside this method.
    init: function (editor) {
      // Define the editor command that inserts a timestamp.
      editor.addCommand("insertTimestamp", {
        // Define the function that will be fired when the command is executed.
        exec: function (editor) {
          var now = new Date();
          // Insert the timestamp into the document.
          editor.insertHtml(
            "<strong>" +
              now.toLocaleDateString(navigator.language) +
              "</strong>"
          );
        },
      });
      // Create the toolbar button that executes the above command.
      editor.ui.addButton("Timestamp", {
        label: "Insert Timestamp",
        command: "insertTimestamp",
        toolbar: "insert",
      });
    },
  });
})(jQuery, Drupal, CKEDITOR);

Once you develop this functionality in plugin.js file, the rest of the process of integrating it into Drupal is the same as Method 2 above.

Credits