Consider an equipment desk that repeatedly writes collection notices. Each notice needs a short collection section, but the author has already written a recipient-specific introduction. A template should add that section where the cursor sits without deleting the introduction.
Define the section authors actually reuse
Use a small, concrete template first. This original example supplies a heading and two paragraphs:
const collectionTemplate = {
title: 'Equipment collection details',
description: 'A collection point and a return reminder.',
data: [
'<h2>Collection details</h2>',
'<p>Collect your recorder at the equipment desk.</p>',
'<p>Confirm the return date with the desk before leaving.</p>'
].join('')
};
The sentences deliberately avoid a default date that could accidentally survive publication. If the process requires an exact collection time, the author must obtain it and write it into the individual notice. A reusable section cannot supply facts the desk has not confirmed.
The configuration belongs inside your existing CKEditor initialization:
// Merge these entries into the existing initialization configuration.
const templateConfiguration = {
template: { definitions: [collectionTemplate] }
};
Also import Template from ckeditor5-premium-features, register it in the existing plugin list, and add insertTemplate to the existing toolbar list. Retain the application's editor root, other plugins, stylesheet imports, and valid license configuration. The fragment above supplies only the definition; it does not initialize an editor by itself. Template configuration API
Keep the insertion point clear
Start with this fictional notice in a development record:
<p>Hello Morgan, your recorder request has been approved.</p>
<p>Please review the collection instructions below.</p>
Place the cursor in an empty paragraph after the second sentence. Open the template control, search for “Equipment collection details,” and insert it. The expected result contains the two original paragraphs followed by the new collection section.
An active selection matters. Inserting while text is selected can replace that selected content. Test with a plain insertion cursor before testing selected ranges. If your application exposes a separate button for one approved snippet, CKEditor also documents the command:
// editor is the existing initialized CKEditor instance.
editor.execute('insertTemplate', collectionTemplate.data);
That command acts on the editor selection. If a custom external control changes focus, verify that it retains the intended selection instead of assuming the insertion position. The Template command reference defines its role; your application's focus behavior still needs checking.
Diagnose a template whose formatting disappears
Templates pass through the editor's supported content model. Inserting a heading does not install the heading feature. CKEditor's template guide explains that unsupported content can be filtered; its example notes that bold text requires the relevant feature.
For the collection section, check three separate results:
| Check | Expected observation | What a failure points to |
|---|---|---|
| Immediately after insertion | The introduction remains and the collection heading appears | Selection position, template configuration, or missing feature support |
| Current editor data | The section's words and supported structure appear in editor.getData() |
Editor model or conversion support |
| Reopened notice | The saved notice still includes both the introduction and the section | Application save and load path |
Avoid enabling acceptance of every possible HTML element merely to preserve one template. Keep the definition compatible with the content features the application intentionally supports. The HTML output reference explains how features contribute editor behavior; use the feature's own documentation when adding a new structure.
Save the individual notice separately from the definition
Changing a template definition changes what a later insertion supplies. It is not a live update mechanism for sections already inserted into saved notices. Maintain reusable wording in the configuration and verify existing notices through the application's ordinary editing process.
For persistence details, follow the CKEditor document editor save guide. Here the final check is specific: reopen Morgan's notice, confirm the personal introduction survived, and verify the collection instructions describe the actual arrangement. Do that before sending the notice to its recipient.