
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
- Install Dependencies:
Runnpm install
to install all required dependencies. - Build the Plugin:
Runnpm run build
to compile the plugin. - Enable the Module:
Enable theckeditor5_anchor
module in Drupal. - Configure Text Formats:
Navigate toConfiguration
β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).
Recent Blogs

The essence of open source cannot be denied in present world. Almost all the popularβ¦Read more