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

In one of our previous articles, we showed you how to configure CKEditor in Drupal 8. Using the available UI is great, but sometimes clients require additional functionality. Large corporate websites with editorial teams have to be able to achieve unique things quickly and therefore they often require custom functions.

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 embed code or its URL.
 

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.
 
 

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.
 

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.

Below I 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:
 

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.
 
Please, 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”.

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

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

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.

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.