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

Web Development / 19.04.20167 comments

creation

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.

1

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:

2

As we can see from the module structure, everything is quite simple:

layoutmanager.info.yml — is responsible for the description of the module.

3

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:

4

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:

5

Now we need to create a description of this plugin.

6

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 <site_name> / admin / modules. After installation is complete, we need to add a plugin button in the editor.

Go to the link <site_name> / 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.

7

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

8
9
10

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

 

By Aleksey Razumov

*This tutorial is acknowledged by Drupal community and added to official documentation on Drupal:  https://www.drupal.org/developing/api/8/ckeditor

Tags: ,
Comments
  1. Devora Huski says:

    Awesome blog post! I will promote this on my social network.

  2. Johng302 says:

    You really make it seem so easy with your presentation but I find this topic to be really something which I think I would never understand. It seems too complicated and extremely broad for me. I’m looking forward for your next post, I’ll try to get the hang of it!

  3. Smithf537 says:

    Hi, I desire to subscribe for this web site to obtain latest updates, therefore where can i do it please assist.

  4. Going Here says:

    I simply want to mention I am just new to blogs and seriously savored this web blog. Almost certainly I’m likely to bookmark your blog post . You definitely come with remarkable posts. Regards for sharing with us your web site.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Subscribe