Specify custom styles with FCKeditor

FCKeditor has a style drop down box which can be used to apply styles to a block of text. The styles in the drop down box can be customised by specifying a custom fckstyles.xml file.

While it’s possible to modify the installed fckstyles.xml file directly, it’s best to create your own and point to that file with the FCKeditor config instead so that when you upgrade to the most recent version of FCKEditor you don’t lose any settings you’ve changed.

See my earlier post about how to specify a custom fckconfig.js file. In your custom fckconfig.js file add the following:

FCKConfig.StylesXmlPath = '/path/to/my/fckstyles.xml';

Note that your custom version of the fckstyles.xml file doesn’t have to be called fckstyles.xml, it can be called anything you want but it makes sense to name it fckstyles.xml.

It can also be set on the server-side without using a custom fckconfig.js file. The following example does this using PHP:

$oFCKeditor->Config["StylesXmlPath"] = '/path/to/my/fckstyles.xml';

The file has the following base format:

<?xml version="1.0" encoding="utf-8" ?>
<Styles>
    <Style name="..." element="...">
        <Attribute name="..." value="..." />
        <Style name="..." value="..." />
        ...
    </Style>
</Styles>

The best reference for how to set up new styles yourself is to look in the fckstyles.xml file that comes with FCKEditor to see how it sets styles up. A couple of examples:

To have a style labelled “Foo” in the drop down box which puts <span class=”foo”></span> around the selection add this:

<Style name="Foo" element="span">
    <Attribute name="class" value="foo" />
</Style>

To do the same but make it a <div> (or modify the selected div if it’s one already) do this:

<Style name="Foo" element="div">
    <Attribute name="class" value="foo" />
</Style>

To apply an inline style to e.g. float an image to the right with 10 pixels of margin left and bottom do this:

<Style name="Image on Right" element="img">
    <Attribute name="style" value="float:right; margin:0 0 10px 10px;" />
</Style>

You can have multiple attributes and can set any of the element’s properties with them.