OpenWGA 7.11 - Guide for OpenWGA Content Manager


Customizing RTF editor

To let authors edit an RTF (rich text field) item you use "rtf" as value of the arrtibute "editor" of the tml:item tag:

<tml:item name="body" editor="rtf"/>

When editing an RTF field the Content Managers shows an RTF toolbar in addition to an RTF tool panel to the right of the page.

You can customize the functions (toolbar buttons) available to the author as well as define other options like available image styles, paragraph styles etc. by specifying the available functions and styles as comma separated list of JSON-Properties in the body of the <tml:item> tag:

<tml:item name="body" editor="rtf">
  showoptions: "all",
  sectionStyleList: ["Advice|advice", "Code|code"],
  css: "<tml:url type="css" name="style"/>"
</tml:item>

Available Options

showoptions

Array of strings representing enabled Toolbar options. Specify "all" to enable all options

hideoptionsArray of strings representing disabled Toolbar options
tableStyleListArray of CSS classes for tables
trStyleListArray of CSS classes for table rows
tdStyleListArray of CSS classes for table cells
paragraphStyleListArray of CSS classes for paragraphs
sectionStyleListArray of CSS classes for sections (<div>-s)
linkStyleListArray of CSS classes for links
imageStyleListArray of CSS classes for images
cssURL to a CSS definition used in FireFox during RTF editing
styleA style definition used in FireFox during RTF editing

Arrays are specified in JS via syntax: [element, element, ...]. String elements must be delimited by single or double quotes.

In CSS classes the actual class name and the Class-text presented to the author may be divided by a pipe:

"Gray table background|gray"

In the Above example the text "Gray table background" will be presented to the author and class="gray" will be inserted in the HTML code.

The options "css" and "style" are currently only used by FireFox browsers.

Toolbar Buttons/Functions

Toolbar buttons and functions are enabled and disabled using the "showoptions" and "hideoptions" property.

Showoptions have priority over hideoptions: If a button command is contained in showoptions it will be enabled even if also contained in hideoptions.

If a button command is neither contained in showoptions nor in hideoptions the button will be enabled.

Use the following strings to enable/disable options of the RTF editor:

all
all options (only available in showoptions)
zoom
Zoom editor panel
edit-helper
Show/hide Editor helper (not available in IE)
Undo
Undo last action
Redo
Redo last action
RemoveFormat
Remove formats (CSS)
Bold
font style bold
Italic
font style italic
Underline
font style underline
Sub
subscript text
Sup
superscript text
JustifyLeft
justify text to left
JustifyCenter
justify text to center
JustifyRight
justify text to right
JustifyFull
justify text to block
Indent
indent text
Outdent
outdent text
InsertUnorderedList
Insert unordered lists
InsertOrderedList
insert ordered lists
InsertImg
insert images
EditImg
edit image
InsertTable
insert tables
InsertLink
insert links
Unlinkremove links
editHTMLenable/disable HTML editing
ForeColoredit foreground color

BackColor

edit backgound color
FontNameedit font family
FontSizeedit font size

Default Show/Hide Options

If you don't specify showoptions or hideoptions the following options are active:

showoptions: zoom, edit-helper, Undo,Redo, RemoveFormat

hideoptions: ForeColor, BackColor, FontName, FontSize, editHTML

Sample:

<tml:item name="body editor="rtf">

  showoptions: "editHTML",

  tableStyleList: ["Gray Tabel|gray"],

  trStyleList: ["Gray table Row|gray-row"],

  tdStyleList: ["Green Tabel Cell|green-cell"],

  paragraphStyleList: ["Two Columns|columns_2"],

  sectionStyleList: ["Source Code|code", "Photos|photos"],

  linkStyleList: ["Video|video"],

  imageStyleList: ["Dia|dia", "Shadow|shadow"],

  css: "<tml:url type="css" name="rtf"/>",

  style: "p{margin:0}"

</tml:item>