FCKEditor

Revision as of 16:09, 30 November 2006

The FCKEditor is the default WYSIWYG editor in OpenCms 6.2 and later. It's 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. You can do this by setting the template property of your template to /system/modules/your.module.name/resources/css/yourcss.css. After setting this property and saving, you will have to create a xml file containing the the css so that the FCKEditor can read and apply your custom styles. Start of by creating a new xml file in /system/modules/your.module.name/resources/css/ called yourcss.css_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