OpenWGA 7.6 - 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:
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:
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 |
| hideoptions | Array of strings representing disabled Toolbar options |
| tableStyleList | Array of CSS classes for tables |
| trStyleList | Array of CSS classes for table rows |
| tdStyleList | Array of CSS classes for table cells |
| paragraphStyleList | Array of CSS classes for paragraphs |
| sectionStyleList | Array of CSS classes for sections (<div>-s) |
| linkStyleList | Array of CSS classes for links |
| imageStyleList | Array of CSS classes for images |
| css | URL to a CSS definition used in FireFox during RTF editing |
| style | A 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 |
| Unlink | remove links |
| editHTML | enable/disable HTML editing |
| ForeColor | edit foreground color |
BackColor | edit backgound color |
| FontName | edit font family |
| FontSize | edit 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>