CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/Features

Templates

The template feature allows you to insert predefined content structures into the document. Templates can provide both smaller portions of content (like a formatted table) and base structures for entire documents (for example, a formal letter template). Templates are a useful tool to speed up the writing process and maintain compliance with the company’s document and content policy.

Unlock this feature with a CKEditor Paid Plan. Sign up for a free trial, or select the Plan that provides access to all the premium features you need.

# Demo

Click the template button Insert template to open the dropdown and select the template you want to apply. You can search the templates by their titles.

This demo presents a limited set of features. Visit the feature-rich editor example to see more in action.

# Installation

⚠️ New import paths

Starting with version 42.0.0, we changed the format of import paths. This guide uses the new, shorter format. Refer to the Packages in the legacy setup guide if you use an older version of CKEditor 5.

After installing the editor, add the feature to your plugin list and toolbar configuration:

import { ClassicEditor } from 'ckeditor5';
import { Template } from 'ckeditor5-premium-features';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Template, /* ... */ ],
		toolbar: [ 'insertTemplate', /* ... */ ],

		// Configure the feature.
		template: {
			definitions: [
				{
					title: 'The title of the template',
					description: 'A longer description of the template',
					data: '<p>Data inserted into the content</p>'
				},
				{
					// ...
				},
				// More template definitions.
				// ...
			]
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );

Read more about installing plugins and toolbar configuration.

# Activating the feature

To use this premium feature, you need to activate it with proper credentials. Refer to the License key and activation guide for details.

# Configuration

For more technical details, check the plugin configuration reference.

The configuration of the feature is simply a list of template definitions.

An example configuration can be as follows:

{
    template: {
        definitions: [
            {
                title: 'Issue acknowledgement (plain text)',
                data: 'Dear customer, thank you for your report! The issue is currently being worked on by our development team.'
            },
            {
                title: 'Signature (multi-line)',
                data: '<p><b>Jane Doe</b></p><p>Marketing Specialist at <a href="https://example.com>Example.com</a></p>',
                description: 'Author signature with the link to the website.'
            },
            {
                title: 'Pricing table',
                data: '<figure class="table"><table><thead><tr><th style="text-align:center;">Feature</th><th style="background-color:hsl(90, 75%, 60%);text-align:center;">Free</th><th style="background-color:hsl(180, 75%, 60%);text-align:center;">Basic</th><th style="background-color:hsl(0, 75%, 60%);text-align:center;"><span style="color:hsl(0, 0%, 100%);">Professional</span></th><th style="background-color:hsl(270, 75%, 60%);text-align:center;"><span style="color:hsl(0, 0%, 100%);">Custom</span></th></tr></thead><tbody><tr><td style="text-align:center;">Feature #1</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr><tr><td style="text-align:center;">Feature #2</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr><tr><td style="text-align:center;">Feature #3</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">✅</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr><tr><td style="text-align:center;">Feature #4</td><td style="background-color:hsl(90, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(180, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(0, 75%, 60%);text-align:center;">❌</td><td style="background-color:hsl(270, 75%, 60%);text-align:center;">✅</td></tr></tbody></table><figcaption>Pricing table</figcaption></figure>',
                icon: '<svg viewBox="0 0 45 45" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="41" height="41"><rect x="2" y="2" width="41" height="41" rx="5" fill="#59A5FF"/></mask><g mask="url(#a)"><rect x="2" y="2" width="41" height="41" rx="5" fill="#444"/><path fill="#ECECEC" d="M4 17h11v11H4z"/><path fill="#A9E6FA" d="M17 17h11v11H17z"/><path fill="#ECECEC" d="M30 17h11v11H30z"/><path d="M4 7a3 3 0 0 1 3-3h31a3 3 0 0 1 3 3v8H4V7Z" fill="#FF1A88"/><path d="M4 30h11v11H7a3 3 0 0 1-3-3v-8ZM17 30h11v11H17z" fill="#A9E6FA"/><path d="M30 30h11v8a3 3 0 0 1-3 3h-8V30Z" fill="#ECECEC"/></g></svg>',
                description: 'Product pricing table that compares individual plans.'
            },
            // More template definitions.
            // ...
        ]
    }
}

Even though the template feature can insert any HTML into the document, some content may be filtered out by the editor if no feature that supports this kind of content is enabled. For instance, if a template inserts <b>Bold text</b>, your editor needs the Bold plugin to be loaded to preserve it.

See the overview of the plugins’ HTML output to learn which features you need. You can also use the General HTML Support feature to insert custom HTML into the content.

Here are some more CKEditor 5 features that can help you work with predefined content blocks and documents:

  • Restricted editing – Define editable areas of the document for users with restricted editing rights.
  • HTML embed – Embed an arbitrary HTML snippet in the editor.
  • The export to Word feature allows you to generate editable .docx files out of your editor-created content.
  • The export to PDF feature allows you to generate portable PDF files out of your editor-created content.

# Common API

The Template plugin registers:

  • The 'insertTemplate' UI dropdown component.
  • The 'insertTemplate' command implemented by TemplateCommand.

You can execute the command to insert arbitrary content into the editor at the user selection:

editor.execute( 'insertTemplate', '<p>Content of the template</p>' );

We recommend using the official CKEditor 5 inspector for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.