Custom Maileditor CKEditor5 build

This is used to generate the javascript include for the CKEditor, which is used as WYSIWYG editor in the Maileditor.

It is built using the CKEditor Framework, to allow full customization of the toolbar elements and plugins used in the editor. The Maileditor allows only a very restricted set of HTML elements, which are then parsed by the MarkupParser. CKEditor creates clean HTML, which helps in getting good results.

Build setup

Requirements

• Node.js

Installation

• Run npm install in the folder
• Recommended: install webpack and webpack-cli globally

How it works

The node package manager (npm) is used to install all the required dependencies into the node_modules folder. The app.js file determines which base packages and plugins need to be loaded, using imports. When webpack is run, it uses these import statements to determine which sources to bundle, and compiles them all into the CKEditor include file.

Note: all import statements in the app.js file are relative to the node_modules folder.

Creating a build

• Run either the build-dev or build-prod batch script

This will compile the javascript source under dist/bundle.js, and copy the file over to the maileditor's themes folder, so it can be used there as well.

To view an example editor, open index.html in the browser.

List of plugins

This build uses a selection of custom plugins:

• ckeditor5-paste-plaintext: For easy pasting from any sources without formatting.
• maileditor-select-link: Select an existing mailing link to link a selection with.
• maileditor-add-link: Open the maileditor dialog to add a new link to the mailing.

Maileditor plugin sources

The custom Maileditor-specific plugins are maintained right here, in the maileditor_plugins folder. They are installed along with the rest of the npm packages, directly from that folder.

Note: When using local file-based packages, node creates a symlink to the source folder in the node_modules folder. This makes it easy to work on the plugin source files. Running a build then automatically uses the source files.