CKEditor 5 merge field plugin

This plugin allow to insert "merge field" in a CKEditor view.

The content can be used as a template and can be processed by any HTML parser to replace dedicate tags on the fly (i.e. for generating PDF report like invoice or formula).

It is fully inspired by the placeholder plugin from the CKEditor documentation and the [mention plugin](https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-mention.

The user can insert a field inline by typing ${. The edition will end with }input. In suchj case a balloon will open containing declared fields that match the input. Every input between ${ and } will be considered as a mergeField (i.e. if the user inputs ${firstName}, firstName will be considered as the field name).

Installation

This plugin can be added to your custom build by using

npm install -D @hguenot/ckeditor5-merge-field

The plugin must be added in your CKEditor 5 build :

import MergeField from "../packages/ckeditor5-mergefield/src/index";

// Plugins to include in the build.
Editor.builtinPlugins = [
    /** ... */
    MergeField,
    /** ... */
];

Configuration

All configuration options are located under the mergeFields key.

• fields list available merge field. It should be a basic array or a plain object (the property is the field name and the value, the field label).
• limit indicate how many results will be displayed in the balloon.

Editor.create(document.querySelector('.editor'), {
    /** ... */
    mergeFields: {
        fields: {
            date: 'birth date',
            color: 'favorite color',
            firstName: 'first name',
            lastName: 'last name'
        },
        limit: 20 // default to 10
    }
    /** ... */
})

Generated HTML

The plugin generates an HTML content similar to:

<span class="merge-field" data-name="date">[Birth date]</span>

The merge-field class on a <span /> tag is used by CKEditor to render the mergeField value. data-name references the field name and the text is the label (in brackets).