Advanced Template plugin

This plugin is only available for paid TinyMCE subscriptions.
This feature is only available for TinyMCE 6.4 and later.
The documentation for this page is a work in progress. Further details on the Advanced Template plugin will be added to this page soon.

The Advanced Template Premium plugin enables the creation of complex, interactive templates using TinyMCE.

They can also be added to a TinyMCE instance by end-users selecting content in a TinyMCE document and saving the selection as a template via the TinyMCE user-interface.

This initial Advanced Template release does not support template editing. To update a particular template; insert the template into an editor; make edits; select the, now edited, content; and then create a new template (using, for example, the Tools > Save as Template… menu item).

Basic setup

To setup the Advanced Template plugin user-interface in the editor

  • add advtemplate to the plugins option in the editor configuration;

  • add inserttemplate and addtemplate to the toolbar option in the editor configuration;

  • add each Advanced Template option to the editor configuration;

For example:

tinymce.init({
  selector: 'textarea',  // change this value according to your html
  plugins: "advtemplate",
  toolbar: "inserttemplate addtemplate",
  advtemplate_list: () => {
    return Promise.resolve([
      {
        id: '1',
        title: 'Resolving tickets',
        content: '<p>As we have not heard back from you in over a week, so we have gone ahead and resolved your ticket</p>'
      },
      {
        id: '2',
        title: 'Quick replies',
        items: [
          {
            id: '3',
            title: 'Message received',
            content: '<p>Just a quick note to say we have received your message, and will get back to you within 48 hours.</p>'
          },
          {
            id: '4',
            title: 'Progress update',
            content: '</p>Just a quick note to let you know we are still working on your case</p>'
          }
        ]
      }
    ]);
  }
});
The above example only demonstrates the Advanced Template user interface. An advtemplate_list option has been added, with an included function returning a promise that contains a basic Template structure. This allows the Advanced Template user interface to load and present in a TinyMCE editor instance. This basic setup example cannot create, edit, or save new Advanced Template items. Nor can it preview Template items or insert Template items into a TinyMCE editor instance.

Options

The following configuration options affect the behavior of the Advanced Template plugin.

advtemplate_list

The plugin uses the advtemplate_list asynchronous function to retreive the template list.

Type: Function (Returns a Promise)

Input parameters: None

Return data: Look in the example below

Example: using advtemplate_list

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_list: () =>
    fetch('/categories', {
      method: 'GET',
    })
    .then((response) => response.json())
    .then((data) => data)
    .catch((error) => console.log('Failed to get template list\n' + error)),
});

Example of advtemplate_list response

const data = [{
    id: '1',
    title: 'Resolving tickets',
  },
  {
    id: '2',
    title: 'Quick replies',
    items: [{
        id: '3',
        title: 'Message received',
      },
      {
        id: '4',
        title: 'Progress update',
      }
    ]
  }
];

The data returned by advtemplate_list must match the following requirements:

  1. Each list item must have a unique id value.

  2. Each list item must have a non-empty title value.

  3. Category items in the list must not contain nested categories.

  4. Category item may contain an empty items list.

  5. Template item is not required to include a content value.

advtemplate_get_template

The plugin uses the advtemplate_get_template asynchronous function to get a template.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

id

string

required

The id of the template to get.

Return data:

Field Type Description

id

string

The id of the template.

title

string

The title of the template.

content

string

The content of the template.

Example: using advtemplate_get_template

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_get_template: (id) =>
    fetch('/templates/' + id, {
      method: 'GET',
    })
    .then((response) => response.json())
    .then(({ id, title, content }) => ({id, title, content}))
    .catch((error) => console.log('Failed to get template\n' + error)),
});

advtemplate_create_category

The plugin uses the advtemplate_create_category asynchronous function to create a category.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

title

string

required

The title of the category.

Return data:

Field Type Description

id

string

The id of the newly created category.

Example: using advtemplate_create_category

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_create_category: (title) =>
    fetch('/categories', {
      method: 'POST',
      body: JSON.stringify({
        title
      }),
    })
    .then((response) => response.json())
    .then(({ id }) => ({ id }))
    .catch((error) => console.log('Failed to create category\n' + error)),
});

advtemplate_create_template

The plugin uses the advtemplate_create_template asynchronous function to create a template.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

title

string

required

The title of the template.

content

string

required

The content of the template.

categoryId

string

optional

The parent category id.

Return data:

Field Type Description

id

string

The id of newly created template.

Example: using advtemplate_create_template

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_create_template: (title, content, categoryId) =>
    fetch('/templates', {
      method: 'POST',
      body: JSON.stringify({
        title,
        content,
        categoryId
      }),
    })
    .then((response) => response.json())
    .then(({ id }) => ({ id }))
    .catch((error) => console.log('Failed to create template\n' + error)),
});

advtemplate_rename_category

The plugin uses the advtemplate_rename_category asynchronous function to rename a category.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

id

string

required

The id of the category to rename.

title

string

required

New category title.

Return data: Empty object {}

Example: using advtemplate_rename_category

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_rename_category: (id, title) =>
    fetch('/categories/' + id, {
      method: 'PUT',
      body: JSON.stringify({
        title
      }),
    })
    .then(() => ({}))
    .catch((error) => console.log('Failed to rename category\n' + error)),
});

advtemplate_rename_template

The plugin uses the advtemplate_rename_template asynchronous function to rename a template.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

id

string

required

The id of the template to rename.

title

string

required

New template title.

Return data: Empty object {}

Example: using advtemplate_rename_template

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_rename_template: (id, title) =>
    fetch('/templates/' + id, {
      method: 'PUT',
      body: JSON.stringify({
        title
      }),
    })
    .then(() => ({}))
    .catch((error) => console.log('Failed to rename template\n' + error)),
});

advtemplate_delete_template

The plugin uses the advtemplate_delete_template asynchronous function to delete a template.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

id

string

required

The id of the template to delete.

Return data: Empty object {}

Example: using advtemplate_delete_template

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_delete_template: (id) =>
    fetch('/templates/' + id, {
      method: 'DELETE',
    })
    .then(() => ({}))
    .catch((error) => console.log('Failed to delete template\n' + error)),
});

advtemplate_delete_category

The plugin uses the advtemplate_delete_category asynchronous function to delete a category.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

id

string

required

The id of the category to delete.

Return data: Empty object {}

Example: using advtemplate_delete_category

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_delete_category: (id) =>
    fetch('/categories/' + id, {
      method: 'DELETE',
    })
    .then(() => ({}))
    .catch((error) => console.log('Failed to delete category\n' + error)),
});

advtemplate_move_template

The plugin uses the advtemplate_move_template asynchronous function to move the template to another category.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

templateId

string

required

The id of the template to move .

newCategoryId

string

optional

The id of the destination category.

Return data: Empty object {}

Example: using advtemplate_move_template

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_move_template: (templateId) =>
    fetch('/templates/' + templateId, {
      method: 'PATCH',
      body: JSON.stringify({
        newCategoryId
      }),
    })
    .then(() => ({}))
    .catch((error) => console.log('Failed to move template\n' + error)),
});

advtemplate_move_category_items

The plugin uses the advtemplate_move_category_items asynchronous function to move all templates from a given category to the another one.

Type: Function (Returns a Promise)

Input parameters:

Field Type Required? Description

oldCategoryId

string

required

The id of the source category .

newCategoryId

string

optional

The id of the destination category.

Return data: Empty object {}

Example: using advtemplate_move_category_itmes

tinymce.init({
  selector: 'textarea#advtemplate',  // change this value according to your html
  plugins: ["advtemplate"],
  advtemplate_move_category_items: (oldCategoryId, newCategoryId) =>
    fetch('/categories/' + oldCategoryId, {
      method: 'PATCH',
      body: JSON.stringify({
        newCategoryId
      }),
    })
    .then(() => ({}))
    .catch((error) => console.log('Failed to move category items\n' + error)),
});

Toolbar buttons

The Advanced Template plugin provides the following toolbar buttons:

Toolbar button identifier Description

inserttemplate

Opens the Templates dialog which presents all templates available to the particular TinyMCE instance for selection and insertion.

addtemplate

Open the New template dialog, allowing for the selected text to be saved as a named template and placed in an already-set category. If there is no selection current in the TinyMCE editor, this button is disabled.

These toolbar buttons can be added to the editor using:

The Advanced Template plugin provides the following menu items:

Menu item identifier Default Menu Location Description

inserttemplate

Insert

Opens the Templates dialog which presents all templates available to the particular TinyMCE instance for selection and insertion.

addtemplate

Tools

Open the New template dialog, allowing for the selected text to saved as a named template and placed in an already-set category. If there is no selection current in the TinyMCE editor, this menu item is disabled.

These menu items can be added to the editor using:

Commands

The Advanced Template plugin provides the following TinyMCE commands.

Command Description

AdvTemplateAddDialog

Opens the Add Template dialog, allowing the current selection to be added as a template.

AdvTemplateInsertDialog

Opens the Insert Template dialog, allowing a template to be inserted at the current selection
Example
tinymce.activeEditor.execCommand('AdvTemplateAddDialog');
tinymce.activeEditor.execCommand('AdvTemplateInsertDialog');