template

This plugin adds support for custom templates. There are two types of files this plugin supports: templates and snippets.

Installation Instructions

1. Add plugin to TinyMCE plugin option list example: plugins : "template".
2. Add the template button name to button list, example: theme_advanced_buttons3_add : "template".
3. Setup your template files (see below)
4. Setup your template options (see below)

Plugin options

Replace values example

Class names are used for templates and variable names are used for snippets.

template_replace_values : {
	className : "Replace with this content",
	anotherClassName: "Replacement content"
}

Replace values (functions) example

Replace content array values can also be functions. If a template element has a classname matching and the value is a fuction the function is called and the element passed as an argument.

template_replace_values : {
	className : function(element) {
		// do something and then:
		// element.innerHTML = something
	}
}

Templates example

template_templates : [
	{
		title : "Editor Details",
		src : "editor_details.htm",
		description : "Adds Editors Name and Staff ID"
	}
]

Example of an external list

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

var tinyMCETemplateList = [
	// Name, URL, Description
	["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
	["Layout", "templates/layout1.htm", "HTML Layout."]
];

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 preview and insert.

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

Making Templates

A template is a file with 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, a template can have dynamic content/smart content that gets updated by functions located in the template_replace_values. These functions will continue to be executed each time a cleanup procedure is performed.

Each template needs to use the following base HTML:

<!-- 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>

Initialization Example

tinyMCE.init({
	theme : "advanced",
	mode : "textareas",
	plugins : "template",
	theme_advanced_buttons3_add : "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"
	},
	template_templates : [
		{
			title : "Editor Details",
			src : "editor_details.htm",
			description : "Adds Editor Name and Staff ID"
		},
		{
			title : "Timestamp",
			src : "time.htm",
			description : "Adds an editing timestamp."
		}
	]
});