Last Modified:
' }, { title: 'Replace values example', description: 'These values will be replaced when the template is inserted into the editor content.', content: 'Name: {$username}, StaffID: {$staffid}
' }, { title: 'Replace values preview example', description: 'These values are replaced in the preview, but not when inserted into the editor content.', content: 'Name: {$preview_username}, StaffID: {$preview_staffid}
' }, { title: 'Replace values preview and content example', description: 'These values are replaced in the preview, and in the content.', content: 'Name: {$inboth_username}, StaffID: {$inboth_staffid}
' } ], content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }' }); ``` ## 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. **Type:** `String`, `Array` or `Function` #### Example using an array ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', 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 a URL ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', toolbar: 'template', templates: '/dir/templates.php' }); ``` ##### Example JSON output of templates.php ```json [ { "title": "Some title 1", "description": "Some desc 1", "content": "My content" }, { "title": "Some title 2", "description": "Some desc 2", "url": "development.html" } ] ``` #### Example using a custom callback function ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', toolbar: 'template', templates: (callback) => { const templates = [ { 'title': 'Some title 1', 'description': 'Some desc 1', 'content': 'My content' }, { 'title': 'Some title 2', 'description': 'Some desc 2', 'url': 'development.html' } ]; callback(templates); } }); ``` ### `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 an HTML comment and is designed not to change even with a template change. **Type:** `String` **Default value:** `'cdate'` #### Example: using `template_cdate_classes` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', 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 value:** `'%Y-%m-%d'` #### Example: using `template_cdate_format` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', toolbar: 'template', template_cdate_format: '%m/%d/%Y : %H:%M', templates: [ { title: 'Cdate', description: 'Cdate example', content: 'This will be replaced with the creation date
' } ] }); ``` If the creation date is set as 9:00AM on January 15th 2000, then inserting this template will insert the following into the editor: ```html01/15/2000 : 09:00
``` For a list of available date and time formats, see: [Reference Date/Time formats](#referencedatetimeformats). ### `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` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', 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 value:** `'%Y-%m-%d'` #### Example: using `template_mdate_format` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', toolbar: 'template', template_mdate_format: '%m/%d/%Y : %H:%M:%S', templates: [ { title: 'Mdate', description: 'Mdate example', content: 'This will be replaced with the date modified
' } ] }); ``` If the date modified is set as 9:00AM on January 15th 2000, then inserting this template will insert the following into the editor: ```html01/15/2000 : 09:00
``` For a list of available date and time formats, see: [Reference Date/Time formats](#referencedatetimeformats). ### `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` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', toolbar: 'template', template_replace_values: { username: 'Jack Black', staffid: '991234' } }); ``` This can then be used in a template or snippet that looks like this: ```htmlName: {$username}, StaffID: {$staffid}
``` And that will be changed to: ```htmlName: 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` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', 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: ```htmlName: {$username}, StaffID: {$staffid}
``` And the preview will look like: ```htmlName: 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` ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', toolbar: 'template', template_selected_content_classes: 'selcontent selectedcontent', templates: [ { title: 'My Template', description: 'This is my template.', content: 'Hello, this statement will be replaced.
' } ] }); ``` If the word `world` is selected in the editor and *My Template* is applied, `world` will be updated to: ```htmlHello, world
``` ## Template Plugin Examples ### Example: using the `template` plugin ```js tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'template', 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.html', description: 'Adds Editor Name and Staff ID' }, { title: 'Timestamp', url: 'time.html', 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. ```json [ {"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 of a div with the `mceTmpl` class, like this example: ```htmlThis is my template text.
'); tinymce.activeEditor.execCommand('mceTemplate'); ```