How to enhance your content authoring by adding custom CKEditor plugin in Drupal 8?

CKEditor is a popular WYSIWYG (What You See Is What You Get). In Drupal default WYSIWYG editor is CKEditor. CKEditor has many of its own plugins.

Recently I got an opportunity to work for some top level media companies like Time Inc and Farm Journal with my Valuebound Teammates. It was a challenging experience , especially on the area of content creation and management work flow.  

We got a requirement where “Content Authors” should be able to upload the images in between  paragraphs of content. When the end user clicks on those images, the image has to be shown as a popup. So we decided to create a CKEditor plugin so that the users who are having  “Content Author” or “Content Editor” roles will be able to upload the image which will show up in a popup when it’s clicked. Because of this requirement, we were fortunate to develop a module called Simple Image Popup and  contribute back to Drupal Community.

Here we are going to see how to create a new plugin for CKEditor in Drupal 8, which inserts image wrapped in anchor tag.

Steps to create CKEditor plugin.

1. Define and add basic plugin info in hook_ckeditor_plugin_info_alter() in your module file.

   File: my_module.module

    
2. Define MyPlugin class which defines plugin, extending CKEditorPluginBase and implementing CKEditorPluginConfigurableInterface. In this plugin class we need to define the following methods:

   File: MyPlugin.php

   1. isInternal - Return is this plugin internal or not.
   2. getFile - Return absolute path to plugin.js file.
      
   3. getLibraries - Return dependency libraries, so those get loaded.
   4. getConfig - Return configuration array.
   5. getButtons - Return button info.
      
   6. settingsForm - Defines form for plugin settings, where it can be configured in ‘admin/config/content/formats/manage/full_html’. For example, this form shown below is where we can set the max size, width and height of the image, against which image will be validated when uploading an image.

       

3. Define client side plugin.js. Basic things we need to implement in plugin.js are:

   File: js/plugins/myplugin/plugin.js

   1. Add the new plugin to CKEditor. In beforeInit method we have to define our plugin command and add UI button which in turn triggers our plugin command on click of UI button as follows,
      
   2. Define routing for the dialog, which points to Form controller.

      File: my_module.routing.yml

   3. Define plugin dialog form and its form submit handler as we normally do in Drupal 8. In addition, on form submit we need to return ajax response command like below

      File: my_module\Form\EditorImagePopupDialog

      And whenever edit operation happens we need to populate existingValues json object in plugin.js file, so we can get those values in buildForm with the below line of code.
      

Finally configurations.

1. Go to ‘admin/config/content/formats’, then click on configure action link for which format this plugin needs to be added.
2. In configuration form, we can drag and drop newly created plugin button to CKEditor toolbar.
3. Now, save the configuration form.
    

Hurray…! Now we can use our newly created CKEditor plugin. For more reference, find the contributed module, in which we have created CKEditor plugin for Drupal 8 Simple Image Popup.