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.

Notice: This page discusses the standalone html editor that is used for HTML pages. For the HTML editor widget that is used to edit HTML blocks inside of xml content types, see HtmlWidget.

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

Adjust Format-Menu

Post from forum[1]

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 reinitialize the workspace (Administration View -> Workplace Tools ), 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.

Configuring buttonbars on a per user base

Unfortunatey the configuration files do not affect the buttonbar of the editor. An approach how to render different button bars for different users is described here Per-request configuration of WYSIWIG-Editor buttonbar

Known problems and possible solutions

This section lists known problems when using opencms's WYSIWIG editor FCKEditor.

The FCKEditor disappears in Firefox, Chrome, Safari and Opera

Commonly identified as a "2010 bug", this problem has a simple fix.

Select the Site: /
Locate the folder: /system/workplace/editors/fckeditor/
Then edit the editor configuration file named: editor_configuration.xml 

The fullpath should be: /system/workplace/editors/fckeditor/editor_configuration.xml

This folder is not located inside the "resources" folder inside the opencms.war,
it only exists within the OpenCms tool and there is no fckeditor.js file in that folder.
If this is not the case, you are probably in the wrong folder called:
/system/workplace/resources/editors/fckeditor/,
hence the confusion.

After opening the file, replace the line:

<agent>^Mozilla/5\.0 \(.* rv:1\..*\) Gecko/200\d* .*$</agent>

with these lines:

<agent>^Mozilla/5\.0 \(.*\) Gecko/20\d* .*$</agent> 
<agent>^(.*)Chrome(.*)$</agent> 
<agent>^(.*)Safari(.*)$</agent> 
<agent>^(.*)WebKit(.*)$</agent> 
<agent>^(.*)Opera(.*)$</agent> 

Save and publish the file, then re-initialize the workplace to finish the fix. This solution was originally suggested on the mailing list by Andreas Zahner.

Right-click on the file editor_configuration.xml and select Publish

At the top, select the View named Administrator

Find and click the icon named: Workplace Tools

Click: Re-Initialize the Workplace 

Now, try opening a file using Firefox and this should now work properly.

Please refer to this bug entry: Bug Entry 1819

Whitespace injection in table cells in IE 6

In OpenCms 6.2.3 and 7.0.0, the WYSIWIG inserts per default line breaks into the HTML code on save, which is critical in table cells when displayed in Internet Explorer 6 => it leads to unintended gaps being rendered. You can fix this by explicitly setting the property "content-conversion" to false. Since it is an inheritable property you can set this behaviour also only once in the top folder.

This problem has been reported as a bug and may be fixed in future versions, see bug report