Skip to main content

KEditor is essential component of any CMS site, and Drupal is equally using it. Drupal provides a builtin CKEditor version (9.x) for open source CKEditor plugin 4.x. Sometimes there are custom functionality that is not available out of the box, but luckily the API can simply help you do it.

Although there are many free available plugins for CKEditor and a list is found here contributed modules.

There are basically three methods for creating for the integration of custom plugins.

  1. Method 1: Contributed modules and contributed plugins
  2. Method 2: Custom Modules & Contributed Plugins
  3. Method 3: Custom Modules & Custom Plugins

Method 1: Contributed modules and contributed 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.

Method 2: Custom Modules & Contributed Plugins

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 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.

CKEditor Preview Plugin

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:



Method 3: Custom Modules & Custom Plugins

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.

CKEditor Timestamp Module

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.
            "<strong>" +
              now.toLocaleDateString(navigator.language) +
      // 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.