Template plugin

The template plugin adds support for custom templates. It also adds a menu item Insert template under the Insert menu and a toolbar button.

Basic setup

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template'
});

Interactive example

This example shows how the template plugin can be used to insert custom templates with pre-defined markup and values.

  • TinyMCE

  • HTML

  • JS

  • Edit on CodePen

<textarea id="template">
  <p>To insert a template, either:</p>
  <ul>
    <li>From the <strong>Insert</strong> menu, select <strong>Insert template...</strong>.</li>
    <li>Select the <strong>Insert template</strong> toolbar button.</li>
  </ul>
</textarea>
tinymce.init({
  selector: 'textarea#template',
  height: 600,
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_mdate_format: '%m/%d/%Y : %H:%M',
  template_replace_values: {
    username: 'Jack Black',
    staffid: '991234',
    inboth_username: 'Famous Person',
    inboth_staffid: '2213',
  },
  template_preview_replace_values: {
    preview_username: 'Jack Black',
    preview_staffid: '991234',
    inboth_username: 'Famous Person',
    inboth_staffid: '2213',
  },
  templates : [
    {
      title: 'Date modified example',
      description: 'Adds a timestamp indicating the last time the document modified.',
      content: '<p>Last Modified: <time class="mdate">This will be replaced with the date modified.</time></p>'
    },
    {
      title: 'Replace values example',
      description: 'These values will be replaced when the template is inserted into the editor content.',
      content: '<p>Name: {$username}, StaffID: {$staffid}</p>'
    },
    {
      title: 'Replace values preview example',
      description: 'These values are replaced in the preview, but not when inserted into the editor content.',
      content: '<p>Name: {$preview_username}, StaffID: {$preview_staffid}</p>'
    },
    {
      title: 'Replace values preview and content example',
      description: 'These values are replaced in the preview, and in the content.',
      content: '<p>Name: {$inboth_username}, StaffID: {$inboth_staffid}</p>'
    }
  ],
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});

Configuration Options

These settings affect the execution of the template plugin. Predefined templates for items such as created dates and modified dates can be set here.

templates

This option lets you specify a predefined list of templates to be inserted by the user into the editable area. It is structured as an array with each item having a title, description and content/url.

If this option is a string then it will be requested as a URL that should produce a JSON output in the same format the option accepts.

Each item in the list can either be inline using a content property or a whole file using the url property.

Example using templates object

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  templates: [
    {title: 'Some title 1', description: 'Some desc 1', content: 'My content'},
    {title: 'Some title 2', description: 'Some desc 2', url: 'development.html'}
  ]
});

Example using templates URL

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  templates: '/dir/templates.php'
});

Example JSON output of templates.php

[
  {"title": "Some title 1", "description": "Some desc 1", "content": "My content"},
  {"title": "Some title 2", "description": "Some desc 2", "url": "development.html"}
]

template_cdate_classes

When HTML elements in a template are assigned this class, the content of the element will be replaced with the 'creation' date (creationdate), formatted according to the template_cdate_format option. This option accepts a list of classes (separated by spaces).

A creation date is one that is set if no previous date existed within the element. Once set, the original date is stored inside the element in a HTML comment and is designed not to change even with a template change.

Type: String

Default Value: cdate

Example: Using template_cdate_classes

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_cdate_classes: 'cdate creationdate'
});

template_cdate_format

This option allows you to provide a date format that all 'creation' date templates will use.

Type: String

Default: '%Y-%m-%d'

Example: Using template_cdate_format

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_cdate_format: '%m/%d/%Y : %H:%M',
  templates: [
    {title: 'Cdate', description: 'Cdate example', content: '<p class="cdate">This will be replaced with the creation date</p>'}
  ]
});

If the creation date is set as 9:00AM on January 15th 2000, then inserting this template will insert the following into the editor:

01/15/2000 : 09:00

For a list of available date and time formats, see: Reference Date/Time formats.

template_mdate_classes

When HTML elements in a template are assigned this class, the content of the element will be replaced with the 'modified' date (modifieddate), formatted according to the template_mdate_format option. This option accepts a list of classes (separated by spaces).

A modified date is one that is updated with each edit.

Type: String

Default Value: mdate

Example: Using template_mdate_classes

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_mdate_classes: 'mdate modifieddate'
});

template_mdate_format

This option allows you to provide TinyMCE with a date/time format that all 'modified' date templates will use.

Type: String

Default: '%Y-%m-%d'

Example: Using template_mdate_format

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_mdate_format: '%m/%d/%Y : %H:%M:%S',
  templates: [
    {title: 'Mdate', description: 'Mdate example', content: '<p class="mdate">This will be replaced with the date modified</p>'}
  ]
});

If the date modified is set as 9:00AM on January 15th 2000, then inserting this template will insert the following into the editor:

01/15/2000 : 09:00

For a list of available date and time formats, see: Reference Date/Time formats.

template_replace_values

This is an object containing items that will be replaced with their respective string values when a template is inserted into the editor content.

Type: Object

Example: Using template_replace_values

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_replace_values: {
    username: 'Jack Black',
    staffid: '991234'
  }
});

This can then be used in a template or snippet that looks like this:

Name: {$username}, StaffID: {$staffid}

And that will be changed to:

Name: Jack Black, StaffID: 991234

template_preview_replace_values

This is an object containing items that will be replaced with their respective string values in the template preview shown in the template dialog; but will not be replaced when a template is inserted into the editor content.

Type: Object

Example: Using template_preview_replace_values

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_preview_replace_values: {
    username: 'Jack Black',
    staffid: '991234'
  }
});

This can then be used in a template or snippet that looks like this:

Name: {$username}, StaffID: {$staffid}

And the preview will look like:

Name: Jack Black, StaffID: 991234

template_selected_content_classes

When HTML elements in a template are assigned this class, the content of the element will be replaced with selected content from the editor. This option accepts a list of classes (separated by spaces).

Type: String

Default Value: selcontent

Example: Using template_selected_content_classes

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  template_selected_content_classes: 'selcontent selectedcontent',
  templates: [
    {
      title: 'My Template',
      description: 'This is my template.',
      content: '<p>Hello, <span class="selcontent">this statement will be replaced.</span></p>'
    }
  ]
});

If the word world is selected in the editor and My Template is applied, world will be updated to:

<p>Hello, <span class="selcontent">world</span></p>

Template Plugin Examples

Example: Using the template plugin

tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'template',
  menubar: 'insert',
  toolbar: 'template',
  template_cdate_classes: 'cdate creationdate',
  template_mdate_classes: 'mdate modifieddate',
  template_selected_content_classes: 'selcontent',
  template_cdate_format: '%m/%d/%Y : %H:%M:%S',
  template_mdate_format: '%m/%d/%Y : %H:%M:%S',
  template_replace_values: {
    username : 'Jack Black',
    staffid : '991234'
  },
  templates : [
    {
      title: 'Editor Details',
      url: 'editor_details.htm',
      description: 'Adds Editor Name and Staff ID'
    },
      {
        title: 'Timestamp',
        url: 'time.htm',
        description: 'Adds an editing timestamp.'
      }
  ]
});

Example of an external template list

This is the contents your backend page should return if you specify a URL in the templates option. A simple array containing each template to present. This URL can be a backend page, for example a PHP file.

[
  {"title": "Some title 1", "description": "Some desc 1", "content": "My content"},
  {"title": "Some title 2", "description": "Some desc 2", "url": "development.html"}
]

Making Templates

A template is a file with a div containing the template data. All html outside the div will simply be presented to the user in the preview frame.

A template has more capabilities than a simple snippet, for example, a template can have dynamic content/smart content that gets updated by functions located in the template_replace_values key. These functions will continue to be executed each time a cleanup procedure is performed.

Each template needs to be inside a div with the mceTmpl class, like this example:

<!-- This will not be inserted -->
<div class="mceTmpl">
  <table width="98%%"  border="0" cellspacing="0" cellpadding="0">
    <tr>
      <th scope="col"> </th>
      <th scope="col"> </th>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
    </tr>
  </table>
</div>

Making Snippets

Snippets are html code chunks that can be inserted. Replace variables will only be executed upon insert, without being wrapped in a template div element. So if you define somevar1 in template_replace_values array it will be replaced on insert. If you wish to preview the replacements before inserting, use template_preview_replace_values.

This is a simple <strong>snippet</strong>. Will be replaced: {$somevar1}.

Reference Date/Time formats

Name Summary

%D

mm/dd/yy (same as %m/%d/%y)

%r

12-hour clock time hh:mm:ss with AM or PM (same as %I:%M:%S %p)

%y

year as a decimal number without a century (range 00 to 99)

%Y

year as a decimal number including the century

%m

month as a decimal number (range 01 to 12)

%B

full localized month name (e.g. "January")

%b

abbreviated localized month name (e.g. "Jan")

%d

day of the month as a decimal number (range 01 to 31)

%A

full localized weekday name (e.g. "Monday")

%a

abbreviated localized weekday name (e.g. "Mon")

%H

hour as a decimal number using a 24-hour clock (range 00 to 23)

%I

hour as a decimal number using a 12-hour clock (range 01 to 12)

%M

minute as a decimal number (range 00-59)

%S

second as a decimal number (range 00-59)

%p

either "am" or "pm" according to the given time value

%%

a literal "%" character