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:
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.
Now when we move to the content editor we’ll see the new functionality.
- I hope you found this article useful. let me know if you have any questions and I’ll be happy to answer them.
- This code can be found and downloaded from https://github.com/codimth/custom_ckeditor_plugin.
