Friday, February 8, 2008

FCKEditor and Stylesheets

Getting FCKEditor to work with your stylesheets is a trick because documentation on how to do it is not very good. You get the basics here and there but finding docs that tell you how from A-Z just doesn't exists.... till now. Here's how I did it.

This is what I figured out for FCKEditor to get it to use custom stylesheets...

1. Open up /fckeditor/fckconfig.js
1a. Edit the following variable:

FCKConfig.BaseHref = 'http://www.yourDomain.com/';
FCKConfig.EditorAreaCSS = '/style.css' ;

Save and close

2. Open up /fckeditor/fckstyles.xml
2a. Define your styles:
E.g.
<Style name="heading1" element="span">
<Attribute name="class" value="heading1" />
</Style>
<Style name="heading2" element="span">
<Attribute name="class" value="heading2" />
</Style>
<Style name="heading3" element="span">
<Attribute name="class" value="heading3" />
</Style>

(Note: this XML must coincide with your CSS. If you have a Style called "myHeader", then you would have XML that would look like this)

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

Save and close.

The Jist.

The first operation pulls in the entire CSS stylesheet your using.
The second operation allows you to show in the style drop down what styles to be used by the user. Not all of the styles in the CSS file are seen or needed by the user normally. This is a great way to separate them but allow them to use their defined styles.