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.

# Demo

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

# Installation

To add the template feature to your editor, install the @ckeditor/ckeditor5-template package:

npm install --save @ckeditor/ckeditor5-template

Then add the Template plugin to your plugin list and configure it:

import { Template } from '@ckeditor/ckeditor5-template';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        // Load the plugin.
        plugins: [ Template, /* ... */ ],

        // Provide activation key (see explanation below)
        licenseKey: 'your-license-key',

        // Display the "Insert template" button in the toolbar.
        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( /* ... */ );

# 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

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.
            // ...
        ]
    }
}

# Related features

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>' );