FCKEditor

Revision as of 10:11, 11 July 2007

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.

Instruct the Editor that your style definitions are available for your XML-content

When working with XML-Content a different approach must be used to make FCKEditor aware of your custom styles. See page HtmlWidget for how to configure the HtmlWidget to show them.

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

Configuring the editor options

Most of the editor options such as font size and face and be enabled/disabled at file /system/workplace/editors/configuration/options_extended. After changing and publishing this file you will need to restart the server, before the changes take effect.

The way configuration files work in the "configuration" folder is that for each user, a lookup in the folder /system/workplace/editors/configuration/ is performed. Files in this folder are read in the order of their "NavPos" property value. The first file that is readable for the user (by using permissions) is used for the editor button configuration. A newer file by default has a lower "NavPos" value and thus will be read first. To manipulate this by hand right click on the file, choose "properties" then click on advanced. You will see the NavPos value stored in one of the fields.

Known problems and possible solutions