The editor offers a complete and powerful support for separating text formatting definitions from the text itself. And even more, it is possible to offer a complete set of predefined formatting definitions to the end-user (writer) so the text can be well designed without messing up the HTML source.
To do that, the Style toolbar command has been introduced. It shows a complete list of available styles with preview for text styles.
The list of available styles is completely customizable for your needs. It is based on a XML file. This file can be placed anywhere in your site. You just need to point the editor to the right path using the following configuration setting:
FCKConfig.StylesXmlPath = '../fckstyles.xml' ;
It is a simple file that describes how to name and apply each style available in the editor. This is a sample:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image"
element="img">
<Attribute name="style"
value="padding: 5px" />
<Attribute name="border"
value="2" />
</Style >
<Style name="Italic" element="em"
/>
<Style name="Title"
element="span">
<Attribute name="class"
value="Title" />
</Style >
<Style name="Title H3" element="h3"
/>
</Styles>
The above sample shows how to define four styles, one for a "Object" element (in this case for images) and three for text. The editor will show the styles in a context sensitive fashion, so when and image is select only the My Image style will be available in the list and when text is selected the Italic, Title and Title H3 will be shown.
The root node of the Styles XML file must be named Styles. Each style definition must be a child of it with a Style name.
The Style nodes have two mandatory attributes:
name: defines the text shown in the styles list.
element: the element used to apply the style on text selection or the object element to witch the style can be applied.
For example: suppose we have the text This is a Style Command test inside the editor and we select Style Command. If we apply the Italic style the source result will be something like this:
This is a <em>Style Command</em>
test
So the editor used the em tag to apply the style, as defined in the XML file.
We can also combine elements and their attributes when applying a style. To do this we can add Attribute nodes inside the Style node definition. We can add as many attributes we want. The Attribute node has two mandatory attributes:
name: the attribute name.
value: the value to be set to the attribute.
So, using the same sample, but now selection the Title style, the source result should be:
This is a <span class="Title">Style Command</span>
test
We can also combine many styles over the same selection. So with the above sample, without changing the selection, and applying the Italic style, the result should be:
This is a <span class="Title"><em>Style Command</em></span>
test
The user can decide to remove the applied style. He just need to click in the style name again to remove it.
The editor is context sensitive. If the user selects some text, only the text styles will be available in the styles list. In the other case, if an object is select, the list will show only styles defined to that object (for now it is available only over Internet Explorer).
The object elements supported by the editor are: IMG, TABLE, TR, TD, INPUT, SELECT, TEXTAREA, HR and OBJECT.
When selecting an Object element and applying a style, no tags will be added surrounding the element, but just the defined attributes will be applied to that element.
For example, if you have and image in the editor and apply the My Image style (from out sample) the source could be something like this:
<img src="Image.jpg" style="padding: 5px" border="2">