CKSource

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.

Style node

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.

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 resulting source code 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.

Attribute node

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 as we want. The "Attribute" node has two mandatory attributes:

• name: the attribute name.
• value: the value to be set to the attribute.

Using the same sample, but instead selecting 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 remove the applied style by selecting the style name again.

NOTE:Note: If you want to use your own CSS styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the EditorAreaCSS property in your config file. e.g. to use CSS styles defined inside "/myownstyles.css" you would need to add:

FCKConfig.EditorAreaCSS = '/myownstyles.css' ;

"Object" elements

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, when an object is selected, the list will show only styles defined for that object (currently available only for Internet Explorer).

The object elements supported by the editor are:

• IMG
• TABLE
• TR
• TD
• INPUT
• SELECT
• TEXTAREA
• HR
• OBJECT

When selecting an “Object” element and applying a style, no tags will be added surrounding the element. Only the defined attributes will be applied to that element.

Example: if you have an image in the editor and apply the “My Image” style (from our sample) the source could be something like this:

<img src="Image.jpg" style="padding: 5px" border="2">