Skip to main content
Category:

CKEditor is a WYSIWYG rich text editor which enables writing content directly inside of web pages or online applications. 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 extend the functionality CKEditor uses plugins

To add a new plugin, we need to create a simple module. as an example, I chose the plugin https://ckeditor.com/cke4/addon/emojione, which allows users to add unicode emojis through CKEditor.

Step 1 - Download the plugin

Download the plugin from the official CKEditor website and copy it into libraries folder. Thus, we obtain the following structure:

Plugin Ckeditor

Step 2 - Create custom_ckeditor_plugin Module

Create custom_ckeditor_plugin.info.yml file:

this file is responsible for the description of the module.

name: Custom CKEditor Plugin
type: module
description: 'Create Custom CKEditor Plugin'
core: 8.x
package: Custom
dependencies:
  - drupal:ckeditor

Create src/Plugin/CKEditorPlugin/EmojioneCKEditorPlugin.php file:

In this file we need to create a description of this plugin.

<?php

namespace Drupal\custom_ckeditor_plugin\Plugin\CKEditorPlugin;

use Drupal\ckeditor\CKEditorPluginBase;
use Drupal\editor\Entity\Editor;

/**
 * Defines the "emojione" plugin.
 *
 * NOTE: The plugin ID ('id' key) corresponds to the CKEditor plugin name.
 * It is the first argument of the CKEDITOR.plugins.add() function in the plugin.js file.
 *
 * @CKEditorPlugin(
 *   id = "emojione",
 *   label = @Translation("Emojione ckeditor button")
 * )
 */
class EmojioneCKEditorPlugin extends CKEditorPluginBase {


  /**
   * {@inheritdoc}
   */
  public function getButtons() {
    $path = $this->getLibraryPath();
    return [
      'Emojione' => [
        'label' => t('Emojione ckeditor button'),
        'image' => $path . '/icons/emojione.png',
      ],
    ];
  }

  /**
   * {@inheritdoc}
   */
  public function getFile() {
    $path = $this->getLibraryPath();
    return $path . '/plugin.js';
  }

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

  /**
   * @return string
   */
  protected function getLibraryPath() {
    return 'libraries/emojione';
  }


}

Content of the file EmojioneCKEditorPlugin.php:

As you can see from the code, we create a new class EmojioneCKEditorPlugin extending CKEditorPluginBase.

  • getButtons adds new buttons to the editor.
  • getFile indicates the location of the plugin.
  • getConfig describes the configuration.
  • getLibraryPath describes The library path.

Next steps

Install your module and clear your Drupal 8 caches. To do this I use this Drush command: drush cr if you don’t currently use Drush, I highly recommend using it, or the Drupal Console.

Now, go to the link /admin/config/content/formats and select the target format. We will need to move the new button in the configuration of the editor to active toolbar and save.

Create Ckeditor custom plugin in Drupal 8

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

Create Ckeditor custom plugin in Drupal 8

 

Create Ckeditor custom plugin in Drupal 8

 

Create Ckeditor custom plugin in Drupal 8

 

 

Riadh Rahmi

Senior Web Developer PHP/Drupal & Laravel

I am a senior web developer, I have experience in planning and developing large scale dynamic web solutions especially in Drupal & Laravel.

Web Posts

Search

Page Facebook