CKEditor 5 templates: insert a reusable section without replacing the document

To add reusable content in CKEditor 5, enable the premium Template plugin, add insertTemplate to the toolbar, and supply template.definitions. Authors choose a definition to insert its content at the current selection. This is different from calling setData(), which replaces the editor's document. Confirm access to the premium feature and use the installation instructions for your editor version. CKEditor templates

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.

Keep reading