How to customize the style drop down in FCKEditor

One of my clients wanted to use the same CSS classes which were being used on the public website in the FCKEditor so that he could apply the classes in one go while writing the content.
Now the Style drop down is populated through the fckstyles.xml in FCKEditor directory root. Its basically an XML file where you can instruct FCKEditor to generate which tag and apply which style to that tag. Below is an excerpt of the XML present in that file

<Style name=”Custom Bold” element=”span”>
<Attribute name=”style” value=”font-weight: bold;” />

You can set the name of the class in the name attribute. The HTML tag to generate in the element attribute. Define the style in the attribute tag by writing the actual style formatting in the value attribute.
Define the number of classes you wish to define here, save the file and refresh the page. You will now see all the styles you have defined in the fckstyles.xml

Hope the above helps

Leave a Comment