Templates Configuration
With FCKeditor, the end user can select a template from a list by clicking in the "Templates" icon in the toolbar. A template is a piece of HTML that is placed inside the editor, in this way the user doesn't need to start writing it from scratch, but a designer can prepare well designed templates, avoiding user errors before they happen.
The editor comes with three sample templates that are used just to show the way it works. It is quite easy to configure and customize it to use your templates. You just need to edit the "fcktemplates.xml" file. Even better, you can create a separated template file (XML file) outside the editor's directory and just configure the editor to use it.
Pointing the editor to your Templates Definitions file
Lets assume you have created a custom Templates Definitions file named "mytemplates.xml" and have placed it in the document root of your web site. Now, just set the following configuration in the fckconfig.js file or in your own Configuration File:
FCKConfig.TemplatesXmlPath = '/mytemplates.xml' ;
The Templates Definitions XML file
This is a sample XML that defines two simple templates:
<?xml version="1.0" encoding="utf-8" ?>
<Templates imagesBasePath="/images/templates/">
<Template title="My Template 1" image="template1.gif">
<Description>Description of my template 1.</Description>
<Html>
<![CDATA[
<b>Template 1 HTML</b>
]]>
</Html>
</Template>
<Template title="My Template 2">
<Html>
<![CDATA[
<b>Template 2 HTML</b>
]]>
</Html>
</Template>
</Templates>
All you have here is a root <Templates> element with many <Template> elements inside it.
Let's analyze each element:
- <Templates>: it is the root element of our XML document. It has the following attributes:
- imagesBasePath: (optional) sets the base path used to build the full path of the preview images. If not set, it means that each template defines the full path of the image, or no images will be used for preview.
- <Template>: defines a single template. It has the following attributes:
- title: (optional) defines the title to show in the templates list. If not set, a default template name will be built using the word "Template" followed by the ordinal position of the template in the list (ex: "Template 5"). Of course, "Template 5" doesn't make much sense and could confuse the user, so it is recommended to set an intuitive name for new templates.
- image: (optional) defines the name of the image file to show as the preview of the template. It will be concatenated with the "imagesBasePath" attribute value of the root "Templates" element (if set). If the image attribute is not set, no preview will be shown. There is no fixed size for the image file.
- <Description>:(optional) defines the textual description of the template. This description is shown in the templates list. No attributes are available for it and is enclosed contents are used as its value. It must be placed inside a <Template> element.
- <Html>: defines the HTML to be set in the editor when the user selects a template. No attributes are available for it and its enclosed contents are used as its value, but we have to create a well formed XML file, so the HTML must be placed inside a CDATA section; in this way the HTML tags are not parsed as XML elements of our template file. A CDATA section starts with "<![CDATA[" and ends with "]]>".
To be sure you have produced a valid template file, just open it with Internet Explorer. It will be shown correctly if the XML is well formed and valid, otherwise IE will point out the errors.