FCKEditor

The FCKEditor is the default WYSIWYG editor in OpenCms 6.2 and later and an integrated version of this editor already ships with OpenCms. The original version of FCKEditor is freely available at the FCKEditor website.

Applying custom styles in FCKEditor

It is possible to make FCKEditor function more like a real WYSIWYG editor by letting selected formats and styles render the same way they do in your template.

Instruct the Editor that your style definitions are available for your template

You can do this by setting the template property of any of your JSP template files to /system/modules/your.module.name/resources/css/yourcss.css. By this, FCKEditor is made aware that this CSS file should be used whenever pages are edited that use this JSP-Template.

Make styles from your CSS file available in the Style Selection Dropdown of FCKEditor

You will have to create a xml file containing the the css so that the FCKEditor knows, which styles of your CSS file should be offered in the custom styles-dropdown.

Start of by creating a new xml file in /system/modules/your.module.name/resources/css/ called yourcss.css_style.xml. This xml file must be in the same folder as your CSS file that is connected to your JSP template and the name of your xml file must be identical to the name of your CSS file, only with the additional suffix _style.xml.

Inside this file, you define the styles you want to be available in FCKEditor as follows:

   <?xml version="1.0" encoding="utf-8" ?>
   <Styles>
   	<Style name="Image on Left" element="img">
   		<Attribute name="style" value="padding: 5px; margin-right: 5px" />
   		<Attribute name="border" value="2" />
   		<Attribute name="align" value="left" />
   	</Style>
   	<Style name="Image on Right" element="img">
   		<Attribute name="style" value="padding: 5px; margin-left: 5px" />
   		<Attribute name="border" value="2" />
   		<Attribute name="align" value="right" />
   	</Style>
   	<Style name="Custom Bold" element="span">
   		<Attribute name="style" value="font-weight: bold;" />
   	</Style>
   	<Style name="Custom Italic" element="em" />
   	<Style name="Title" element="span">
   		<Attribute name="class" value="Title" />
   	</Style>
   	<Style name="Code" element="span">
   		<Attribute name="class" value="Code" />
   	</Style>
   	<Style name="Title H3" element="h3" />
   	<Style name="Custom Ruler" element="hr">
   		<Attribute name="size" value="1" />
   		<Attribute name="color" value="#ff0000" />
   	</Style>
   </Styles>

The code snippet above is copy pasted from the xml file included with OpenCms which can be found at /system/workplace/resources/editors/fckeditor/fckstyles.xml

External references

Pdf explaining how to enable custom styles in FCKEditor