The following text reveals information about visual and other tweakable configuration settings for the Online Editor.

Stylesheets

The predefined styles for the OE text area are specified in the following folder:

<eZ_Publish_root>/ezpublish_legacy/extension/ezoe/design/standard/stylesheets/skins/

Two skins are included:

•  default: the grey skin as shown in some of the screenshots
•  o2k7: a 'Office 2007' skin as used out of the box.

You can change the appearance of the OE text area by adding custom skins here:

<eZ_Publish_root>/ezpublish_legacy/design/<your_design>/stylesheets/skins/<skin_name>/ui.css

You also have to add two other files in that folder to make it complete: content.css and dialog.css.

Alternatively you can use skin variations if you only want to change the skin on the editor. The included skin variations in the Office 2007 skin are 'silver' (ui_silver.css) and 'black' (ui_black.css) .

If you want to create your own skin variation, place it here:

<eZ_Publish_root>/ezpublish_legacy/design/<your_design>/stylesheets/skins/<skin_name>/ui_<skin_variation>.css

You can change skin and skin variation in ezoe.ini in [EditorSettings], for example "Skin=O2K7" or "SkinVariant=Silver".

Styling editor content

If you want to customize the styling of the content, you can use the EditorCSSFileList setting in design.ini. The design.ini file is the eZ Publish configuration file for design. Here you can append your own .css files, which should be used for the editing content, much like you could in the old editor. Lets presume you want to add “my_custom_editor_styles.css”, this can be done in your design.ini file as follows:

[StylesheetSettings]
EditorCSSFileList[]=my_custom_editor_styles.css

You can add a custom editor style css for your pop-up dialogs to:

[StylesheetSettings]
EditorDialogCSSFileList[]=my_custom_editor_dialog_styles.css

Custom attributes

It is possible to add custom attributes which allow you to set label name, type (string, int, float, color, htmlsize....) and so on. For more information and examples please check out

<eZ_Publish_root>/ezpublish_legacy/settings/ezoe_attributes.ini

Custom tag

The [CustomTagSettings] CustomTagsDescription works in the same way as [<tag_name>]ClassDescription works with normal tags, letting you have more human readable text in the drop down.

Image filters

The GUIName setting was added to define human readable name for the image filters.
 The setting HideFromRelations=enabled allows developers hide specific filters from OE drop down.

Please note that changing these files will only change the visual appearance of the Online Editor but not the site or the administration interface. After making changes in these files, clear all eZ Publish caches and the browser cache.

Copy & paste from Word settings

The Online Editor has limited support for copy and paste from Word. When you paste something from Word, OE should "translate" all formatting into XML tags. This is done by the automatic creation of tables, paragraphs, lists, headings and so on. The Online Editor will simply attempt to re-create the structures by using the available XML tags. However, the XML representation is somewhat limited and thus it does not support things like fonts styles, colors and other visual settings. While the structure will be more or less kept, the visual settings will most probably be stripped away.

It is strongly recommended that you click the "Store draft" button right after pasting information from Word, OpenOffice Writer, your browser or any other external application.

Translation rules

Most of the XML tags support the "class" parameter/attribute. The value determines which CSS class that will be used. When OE "translates" a Word structure into XML tags, it can automatically assign class names to many of the tags. The translation rules must be specified in the following file:

<eZ_Publish_root>/ezpublish_legacy/extension/ezdhtml/settings/wordmatch.ini

Please look at the following example for details.

Example

When you copy and paste from Word, the Online Editor will detect fragments corresponding to table cells and "translate" them as "td" tags. The style information of these cells will be stripped away. The following example configuration (in "wordmatch.ini") shows how you can set up a couple of rules in order to "translate" the visual styles that were used in Word into classes.

[td]
MatchString[tdBlue]=mso-shading: white; mso-pattern: gray-20 black
MatchString[tdRed]=mso-shading: white; mso-pattern: gray-30 black

The first rule instructs OE to search for "mso-shading: white; mso-pattern: gray-20 black" when dealing with table cells. If a match is found, the "tdBlue" class will be set for the corresponding/converted "td" tag. The second rule works in the same way, but it will instruct the OE to use the "tdRed" class when the rule matches.