How to Create Custom plugin in Drupal Ckeditor 5

Introduction

CKEditor 5 is the default editor in Drupal 10, having been initially introduced in Drupal 9.3. CKEditor 5 was written completely from scratch, and it’s based on ES6. Ckeditor-5 also provides the flexibility to create custom plugins within the editor just like ckeditor-4. Now CKEditor 5 has a lot of enhanced features in Drupal.

CKEditor 5 Premium Features

The CKEditor 5 Premium Features module expands on the default functionality offered in the core. It includes features such as real-time collaboration in the editor area, exporting to PDF and Word files, importing from Word files (.docx and .dotx), and full-screen mode.

Some highlighted premium features of CKEditor 5

• Track changes (to make suggested edits)
• Comments (to discuss the content)
• Revision History (to see what changes were made and compare and restore previous versions of the content)
• Real-time Collaboration
• Notification, Export to PDF & Word, Import from Word, Full-screen mode, etc

To enable the Premium feature in Drupal 10, we need to purchase the license & enable/configure this module. You can read here about the premium features of the ckeditor5. CKE 5 Provides a set of rich debugging tools for editor internals like model, view, and commands.

CKEditor 5 inspector: Drupal provides a debug module called  CKEditor 5 inspector. it provides the debug console, which is helpful to debug & build the plugin.

We can download & enable in Drupal

Reference: https://www.drupal.org/project/ckeditor5_dev

It also provides a starter template in /ckeditor5_plugin_starter_template for modules providing custom CKEditor 5 plugins.

Step : 1 Copy the ckeditor5_plugin_starter_template & paste it into the module folder & rename it (like /module/custom/test). Replace the MODULE_NAME with your module name in all the files.

Step : 2 Download dependency: From the module root directory, run the command npm install (it will download all the dependencies in node_module folder, which is mentioned in package.json)

Step: 3 Make a build: Within the root directory of the module, we need to run npm run build It will make the build and will create a file within the /js/build/{plugin_name.js} automatically.

That’s it Drupal plugin is created; we can enable it in the editor, Default plugin name is simple_box_demo

Let’s Understand the some file uses & workflow

There are two ways to enable plugins either yml or PHP class

Using Yml

MODULE_NAME.ckeditor5.yml

test_demo_simplebox:
  ckeditor5:
    plugins:
      - demoPlugin.SimpleBox
  drupal:
    label: Simple box demo
    library: test/demobox
    admin_library: test/admin.demobox
    toolbar_items:
      simpleBox:
        label: Simple box demo
    elements:
      - <h2>
      - <h2 class="simple-box-title">
      - <div>
      - <div class="simple-box-description">
      - <section>
      - <section class="simple-box">

ckeditor5_custom_paste_pasteFilter:
ckeditor5:
plugins:
- pasteFilter.PasteFilter
drupal:
label: Ckeditor 5 Custom Paste
class: \Drupal\ckeditor5_custom_paste\Plugin\CKEditor5Plugin\PasteFilter
library: ckeditor5_custom_paste/custom_paste_filter
elements: false

class PasteFilter extends CKEditor5PluginDefault{
// code goes here
}