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 theplugins
option in the editor configuration; -
add
inserttemplate
andaddtemplate
to thetoolbar
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.
|
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:
-
Each list item must have a unique
id
value. -
Each list item must have a non-empty
title
value. -
Category items in the list must not contain nested categories.
-
Category item may contain an empty
items
list. -
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 |
---|---|---|---|
|
|
required |
The id of the template to get. |
Return data:
Field | Type | Description |
---|---|---|
|
|
The id of the template. |
|
|
The title of the template. |
|
|
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 |
---|---|---|---|
|
|
required |
The title of the category. |
Return data:
Field | Type | Description |
---|---|---|
|
|
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 |
---|---|---|---|
|
|
required |
The title of the template. |
|
|
required |
The content of the template. |
|
|
optional |
The parent category id. |
Return data:
Field | Type | Description |
---|---|---|
|
|
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 |
---|---|---|---|
|
|
required |
The id of the category to rename. |
|
|
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 |
---|---|---|---|
|
|
required |
The id of the template to rename. |
|
|
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 |
---|---|---|---|
|
|
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 |
---|---|---|---|
|
|
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 |
---|---|---|---|
|
|
required |
The id of the template to move . |
|
|
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 |
---|---|---|---|
|
|
required |
The id of the source category . |
|
|
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 |
---|---|
|
Opens the Templates dialog which presents all templates available to the particular TinyMCE instance for selection and insertion. |
|
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
toolbar
configuration option. -
The
quickbars_insert_toolbar
configuration option.
Menu items
The Advanced Template plugin provides the following menu items:
Menu item identifier | Default Menu Location | Description |
---|---|---|
|
Insert |
Opens the Templates dialog which presents all templates available to the particular TinyMCE instance for selection and insertion. |
|
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:
-
The
menu
configuration option. -
The
contextmenu
configuration option.
Commands
The Advanced Template plugin provides the following TinyMCE commands.
Command | Description |
---|---|
AdvTemplateAddDialog |
Opens the |
AdvTemplateInsertDialog |
Opens the |
tinymce.activeEditor.execCommand('AdvTemplateAddDialog');
tinymce.activeEditor.execCommand('AdvTemplateInsertDialog');