Porting a CKEditor 5 Plugin to Drupal 10

Porting a CKEditor 5 plugin to Drupal 10 involves creating a custom Drupal module that includes the plugin's code, dependencies, and configuration. This process ensures the plugin functions correctly within the Drupal environment

🛠️ Step 1: Create a Custom Module

First, create a custom module in Drupal. For this example, we'll name it ckeditor5_anchor. This module will contain all necessary configurations and assets for the plugin.(evolvingweb.com)

Directory Structure:

modules/custom/ckeditor5_anchor/
├── ckeditor5_anchor.info.yml
├── ckeditor5_anchor.ckeditor5.yml
├── ckeditor5_anchor.libraries.yml
├── package.json
├── webpack.config.js
└── js/
    └── build/
        └── anchor.js
    └── ckeditor5_plugins/
        └── anchor/
            └── src/
                └── index.js
                └── plugin.js
                └── ui.js
                └── view.js
                └── utils.js
    └── css/
        ├── anchor.css
        ├── anchoractions.css
        ├── anchorform.css
        └── anchorimage.css
    └── icons/
        └── anchor-icon.svg

📄 ckeditor5_anchor.info.yml

This file registers the module with Drupal.(api.drupal.org)

name: 'CKEditor 5 Anchor Plugin'
type: module
description: 'Integrates the CKEditor 5 Anchor plugin into Drupal.'
core_version_requirement: ^10
dependencies:
  - drupal:ckeditor5

📄 ckeditor5_anchor.ckeditor5.yml

This file defines the CKEditor 5 plugin for Drupal.(redfinsolutions.com)

ckeditor5_anchor_anchor:
  ckeditor5:
    plugins:
      - anchor.Anchor
  drupal:
    label: 'Anchor'
    library: ckeditor5_anchor/anchor
    admin_library: ckeditor5_anchor/anchor.admin
    toolbar_items:
      anchor:
        label: 'Anchor'
    elements:
      - <p>

📄 ckeditor5_anchor.libraries.yml

This file defines the JavaScript and CSS libraries for the plugin.

ckeditor5_anchor/anchor:
  remote: https://github.com/bvedad/ckeditor5-anchor
  version: "1.0.0"
  license:
    name: 'GNU-GPL-2.0-or-later'
    url: https://github.com/ckeditor/ckeditor5/blob/master/LICENSE.md
    gpl-compatible: true
  js:
    js/build/anchor.js: { preprocess: false, minified: true }
  css:
    theme:
      css/anchoractions.css: {}
      css/anchor.css: {}
      css/anchorform.css: {}
      css/anchorimage.css: {}
  dependencies:
    - core/ckeditor5
ckeditor5_anchor/anchor.admin:
  css:
    theme:
      css/anchor.admin.css: {}

📄 package.json

This file manages the project's dependencies and build scripts.(github.com)

{
  "name": "drupal-ckeditor5-anchor",
  "version": "1.0.0",
  "description": "Drupal CKEditor5 Anchor plugin",
  "author": "",
  "license": "GPL-2.0-or-later",
  "scripts": {
    "watch": "webpack --mode development --watch",
    "build": "webpack"
  },
  "devDependencies": {
    "@ckeditor/ckeditor5-dev-utils": "^30.0.0",
    "ckeditor5": "~34.1.0",
    "raw-loader": "^4.0.2",
    "terser-webpack-plugin": "^5.2.0",
    "webpack": "^5.51.1",
    "webpack-cli": "^4.4.0"
  },
  "dependencies": {
    "@ckeditor/ckeditor5-core": "^36.0.1",
    "@ckeditor/ckeditor5-image": "^36.0.1"
  }
}

📄 webpack.config.js

This file configures Webpack for building the plugin.(tothenew.com)

const path = require('path');
module.exports = {
  entry: './js/ckeditor5_plugins/anchor/src/index.js',
  output: {
    path: path.resolve(__dirname, 'js/build'),
    filename: 'anchor.js',
    library: 'Anchor',
    libraryTarget: 'umd',
  },
  resolve: {
    alias: {
      '@ckeditor': path.resolve(__dirname, 'node_modules/@ckeditor'),
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
          },
        },
      },
    ],
  },
  externals: {
    '@ckeditor/ckeditor5-core': 'CKEditor5',
  },
};

📄 js/ckeditor5_plugins/anchor/src/index.js

This file initializes the CKEditor 5 plugin.

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import { ButtonView } from '@ckeditor/ckeditor5-ui/src/button';
import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
export default class Anchor extends Plugin {
  init() {
    const editor = this.editor;
    editor.ui.componentFactory.add('anchor', locale => {
      const button = new ButtonView(locale);
      button.set({
        label: 'Anchor',
        icon: '<svg>...</svg>', // Add SVG icon here
        tooltip: true,
      });
      button.on('execute', () => {
        // Implement anchor insertion logic here
      });
      return button;
    });
  }
}

📄 js/ckeditor5_plugins/anchor/src/plugin.js

This file contains the plugin's main functionality.

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
export default class AnchorPlugin extends Plugin {
  init() {
    // Plugin initialization logic
  }
}

📄 js/ckeditor5_plugins/anchor/src/ui.js

This file handles the user interface components.

import { ButtonView } from '@ckeditor/ckeditor5-ui/src/button';
export function createAnchorButton(locale) {
  const button = new ButtonView(locale);
  button.set({
    label: 'Insert Anchor',
    icon: '<svg>...</svg>', // Add SVG icon here
    tooltip: true,
  });
  button.on('execute', () => {
    // Implement anchor insertion logic here
  });
  return button;
}

📄 js/ckeditor5_plugins/anchor/src/view.js

This file manages the view layer of the plugin.(tothenew.com)

import { View } from '@ckeditor/ckeditor5-ui/src/view';
export class AnchorView extends View {
  constructor(locale) {
    super(locale);
    this.setTemplate({
      tag: 'div',
      children: [
        // Define view structure here
      ],
    });
  }
}

📄 js/ckeditor5_plugins/anchor/src/utils.js

This file contains utility functions.

export function createAnchorElement() {
  // Utility function to create anchor element
}

✅ Final Steps

1. Install Dependencies:
   Run npm install to install all required dependencies.
2. Build the Plugin:
   Run npm run build to compile the plugin.
3. Enable the Module:
   Enable the ckeditor5_anchor module in Drupal.
4. Configure Text Formats:
   Navigate to Configuration → Content authoring → Text formats and editors.
   • Edit the desired text format.
   • Add the 'Anchor' button to the toolbar.
   • Save the configuration.(peterjlord.co.uk, redfinsolutions.com)

Your CKEditor 5 Anchor plugin should now be integrated into Drupal 10, allowing users to insert anchors into content.(evolvingweb.com)

For more detailed information and advanced configurations, refer to the official Drupal documentation on CKEditor 5 plugins: (drupal.org).