Creation of extended functionality for the basic CKEditor in Drupal 8*

This tutorial is acknowledged by Drupal community and added to official documentation on Drupal: 

CKEditor is one of the best, if not the best, editor for website content. To learn more about it please check the official documentation by following the link.

Drupal 8 in its basic version has built-in CKEditor with minimal basic functionality to edit the text.

Example of CKEditor functionality after installation of Drupal 8.

For most of the sites, such functionality is enough to edit website content, but very often, especially on large, sophisticated projects, in order to add new functionality, a layman may require additional features of the editor.

To extend the functionality CKEditor uses plugins. For example, you may need to add youtube video and display it on the page; or another story, when content manager wants to use a different grid to display content, for all these purposes we are looking for plugin and add it to the editor.

Today there are more than 500 plugins on the official website of the editor.

Drupal 8 offers a very user-friendly functionality to add a new plugin to CKEditor. Compared to version 7, with version 8 it’s much easier to add new plugins. Now the site administrator has a more usable interface to work with the editor and its extensions.

As an example, I chose the plugin layout manager, which allows to add new grids to the edited content.

To add a new plugin, we need to create a simple module.

The structure of this module is as follows:

As we can see from the module structure, everything is quite simple: — is responsible for the description of the module.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

layoutmanager.module in this case, does not imply any filling, so let’s leave it blank, but if you need to expand it in the future, then all the code will be entered into it.

js is a folder for storing data about the plugin. Create a new folder Pluginsinside it, download a plugin from the official CKEditor website and copy it into newly created folder. Thus, we obtain the following structure:

Now it’s necessary to explain to Drupal that we have created a new plugin. For this purpose in the folder src let’s create a new folder Plugin, and create a new folder inside CKEditorPlugin. In this folder let’s create a new plugin file, in my case, it will have the name LayoutManager.php. We obtain the following structure:

Now we need to create a description of this plugin.

Content of the file LayoutManager.php

As you can see from the code, we create a new class LayoutManager extendingPluginBase.

getDependencies indicates the dependence of this plugin. In my case, it depends on basewidget plugin (which is connected in the same way as described above).

getLibraries describes additional libraries.

getFile indicates the location of the plugin.

getButtons adds new buttons to the editor.

• getConfig describes the configuration.

After this we need to install a new module by clicking on the link / admin / modules. After installation is complete, we need to add a plugin button in the editor.

Go to the link / admin / config / content / formats and select the target format for our configuration. When we enter the configuration, we will need to move the new button in the configuration of the editor (in my case, I created a group Layout to place there the new button) and save.

Now when we move to the content editor we’ll see the new functionality.

Plugin LayoutManager is a pleasant visual wrapper to add new templates which use grid in the editor.