FCKEditor
(→Configuring the editor options) |
(→Configuring the editor options) |
||
| (29 intermediate revisions by 14 users not shown) | |||
| Line 1: | Line 1: | ||
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 [http://www.fckeditor.net/ FCKEditor website]. | 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 [http://www.fckeditor.net/ 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 == | == Applying custom styles in FCKEditor == | ||
| Line 6: | Line 8: | ||
=== Instruct the Editor that your style definitions are available for your template === | === Instruct the Editor that your style definitions are available for your template === | ||
You can do this by setting the <em>template</em> property of any of your JSP template files to <em>/system/modules/your.module.name/resources/css/yourcss.css</em>. By this, FCKEditor is made aware that this CSS file should be used whenever pages are edited that use this JSP-Template. | You can do this by setting the <em>template</em> property of any of your JSP template files to <em>/system/modules/your.module.name/resources/css/yourcss.css</em>. 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 === | === Make styles from your CSS file available in the Style Selection Dropdown of FCKEditor === | ||
| Line 44: | Line 49: | ||
The code snippet above is copy pasted from the xml file included with OpenCms which can be found at <em>/system/workplace/resources/editors/fckeditor/fckstyles.xml</em> | The code snippet above is copy pasted from the xml file included with OpenCms which can be found at <em>/system/workplace/resources/editors/fckeditor/fckstyles.xml</em> | ||
| + | |||
| + | === Adjust Format-Menu === | ||
| + | Post from forum[http://www.nabble.com/Customizing-Fckeditor-Font-Format-menu-td4500629.html#a4500629] | ||
=== External references === | === External references === | ||
| − | [http://www.comundus.com/ | + | [http://www.comundus.com/downloads/opencms/styles-in-fckeditor.pdf Pdf explaining how to enable custom styles in FCKEditor] |
== Configuring the editor options == | == 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 | + | 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. | 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 [http://mail.opencms.org/pipermail/opencms-dev/2010q1/033643.html 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: [http://bugzilla.opencms.org/show_bug.cgi?id=1819 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, [http://bugzilla.opencms.org/show_bug.cgi?id=1459 see bug report] | ||
[[Category:Using / Maintaining an installation of OpenCms]] | [[Category:Using / Maintaining an installation of OpenCms]] | ||
Latest revision as of 09:30, 17 December 2011
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
