Styles Configuration
The editor offers complete and powerful support for separating text formatting definitions from the text itself. And even more, it's 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.
Customizing the Styles list
The list of available styles is completely customizable for your needs. It is based on an 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' ;
The Styles XML file
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 an "Object" element (in this case for images) and three for text. The editor will show the styles in a context sensitive fashion, so when an image is selected, 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 the root node 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 which the style can be applied.