How to add new button (plugin) to CKEditor pt. II

05.03.2018
A window similar to Drupal WYSIWYG editor with "CKEditor" and "Drupal" and Drupal logo visible on screen

In one of our previous articles, we showed you how to configure CKEditor in Drupal 8.
This time, we are going to demonstrate how you can expand the editor’s functionality on your own.
 
In the case of many websites, the basic functions of CKEditor are more than enough. 
However, there are projects where clients demand expanding the functionality of the content editor.
With CKEditor, you can do that using plug-ins – all of them are available on the official website.
http://ckeditor.com/addons/plugins/all 
Adding a new plug-in to the website based on Drupal 8 is very simple compared to the way it was done in the previous version of Drupal. All you need is to create a simple module.
 
As our example, I chose a plug-in that will enable us to post a YouTube clip using an embed code or its URL.
 

The catalogue tree with the structure of the module

The plug-in in question: https://ckeditor.com/cke4/addon/youtube 
Create a module named cke_youtube (or choose your own name).
 
The structure of the module is as follows:
 
cke_youtube.info.yml
file contains the standard data of the module.
cke_youtube.module file is an empty PHP file, we don’t need any code there.
 
The structure contains two additional directories:
Plug-in directory - js. 
There, you will find another directory named “plugins”.
Unpack the files downloaded from https://ckeditor.com/cke4/addon/youtube  there.
 
 The -js. plugin catalogue visible in the catalogue tree of module

Creating a new plug-in in Drupal takes place in a new class file, which we have to create and then properly configure.
In our case, it is going to be Youtube.php, and the entire structure needs to look like as follows.
 

full structure of module

Code:

<?php

namespace Drupal\cke_youtube\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginInterface;
use Drupal\ckeditor\CKEditorPluginButtonsInterface;
use Drupal\Component\Plugin\PluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "Youtube" plugin, with a CKEditor.
 *
 * @CKEditorPlugin(
 *   id = "youtube",
 *   label = @Translation("Youtube Plugin")
 * )
 */
class Youtube extends PluginBase implements CKEditorPluginInterface, CKEditorPluginButtonsInterface {

  /**
   * {@inheritdoc}
   */
  public function getDependencies(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function getLibraries(Editor $editor) {
    return [];
  }

  /**
   * {@inheritdoc}
   */
  public function isInternal() {
    return FALSE;
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    return drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/plugin.js';
  }

  /**
   * @return array
   */
  public function getButtons() {
    $iconImage = drupal_get_path('module', 'cke_youtube') . '/js/plugins/youtube/images/icon.png';

    return [
      'Youtube' => [
        'label' => t('Add Youtube Video'),
        'image' => $iconImage,
      ]
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getConfig(Editor $editor) {
    return [];
  }

}

The YouTube class uses two interfaces -  CKEditorPluginInterface, CKEditorPluginButtonsInterface
Take a closer look at its comment. The “id” variable must contain the same name as the name of the plug-in you’re installing. 
In this case, the name is “youtube”.
For other plug-ins, you will find the name in the plugin.js file.

Plugin.js file. The name in the bracket is name of your plugin. Here: Youtube name is visible

Below we will briefly discuss all the methods and what they do:
getDependencies()
Here you will put in all the names of the plug-ins which are required for your plug-in to work.
If they are not needed, you leave the method empty, and our YouTube plug-in is one of such cases.
You will find the required plug-ins in the plugin.js file.
Example for Layout Manager plug-in:
 

List of plugins needed to install tle "layout manager" plugin from plugin.js file

In this case, you would have to first install basewidget, and then add layoutmanager.

getLibraries()
Specifies additional libraries.

getFile()
Plug-in location.

getButtons()
Adds a new button to the editor.
 
Keep in mind that you have to use a correct name in the return array:
In the case of this plug-in, the correct name is “Youtube”.

 

The right name used in the table. At this case it's "Youtube"

You can find the required name in the plugin.js file.

 

Plugin.js file. The name after .addbutton is the name of your plugin.

At the point where the entire structure and names are correct, you can turn on your new module.
Go to Extend (/admin/modules/)
 

Extend/admin/modules with new plugin available

Now, go to text formats and editor configuration

Configuration → Content Authoring → Text formats and editors (/admin/config/content/formats/)

Add a new button to the editor for a selected format.

 

New button is being added to CKEditor

After applying changes, add new content and select text format for which you just set up the Add YouTube Video button.
If everything works well, a window will open after clicking the button, allowing you to put in your embed code or URL to your clip.

"Embed youtune video" window that let's the user to add youtube films to the page that appeared after using the new button of the CKEditor.

Need a team of Drupal and PHP web development experts?

Test us now!