Contribute to this guideReport an issue

guideContent Templates

This feature is provided through the Content Templates plugin that is included in the Full preset available from the official CKEditor 4 Download site. You can also add it to your custom build with online builder.

This Content Templates plugin provides a dialog to offer predefined content templates - with page layout, text formatting and styles.

When enabled, the plugin adds the Templates (Copy Formatting toolbar button) toolbar button. Use it to invoke a dialog with defined templates, then use the dialog to apply a selected template.

Content Templates selector in CKEditor

A couple of sample templates can be found inside of the plugin directory at install time. An integrator may design and load their own favorite templates, too.

# Defining Templates

You can define new template files by configuring template files option. That option allows customizing the list of template definition files that will be loaded upon opening the Content Templates dialog.

// Set custom template file paths.
config.templates_files = [

An example template file is located in templates/default.js. Templates are defined by the templateDefinition type and can be added using the addTemplates method. A template needs several basic things to work. The most important part is the HTML content defining the layout of the template.

The following code registers the default template with title, text body and an image.

// Register a templates definition set named "default".
CKEDITOR.addTemplates( 'default', {
    // The name of sub folder which hold the shortcut preview images of the
    // templates.
    imagesPath: CKEDITOR.getUrl( CKEDITOR.plugins.getPath( 'templates' ) + 'templates/images/' ),

    // The templates definitions.
    templates: [ {
        title: 'Image and Title',
        image: 'template1.gif',
        description: 'One main image with a title and text that surround the image.',
        html: '<h3>' +
            // Use src=" " so image is not filtered out by the editor as incorrect (src is required).
            '<img src=" " alt="" style="margin-right: 10px" height="100" width="100" align="left" />' +
            'Type the title here' +
            '</h3>' +
            '<p>' +
            'Type the text here' +
    } ]
} );

See template definition to learn more about template options.

# Content Templates Demo

See the working “Content Templates” sample that showcases the use of predefined content templates and the plugin implementation.

Refer to the following resources for more information about text styling and formatting: