Rich Text Editing

Some Genero clients support a rich text editing interface, which can display a toolbox with classic editing actions (bold, italic, font size, and so on). Local actions are also created.

Figure 1. Rich text editing interface

Rich text editing provides:

• Text format: bold, italic, underline
• Paragraph alignment: left, center, right, justify
• Lists: bullet, decimal
• Paragraph indentation
• Font size

<Style name="TextEdit.richText">
  <StyleAttribute name="textFormat" value="html" />
</Style>

<Style name="TextEdit.richText">
  <StyleAttribute name="textFormat" value="html" />
  <StyleAttribute name="customWidget" value="TinyMCE" />
</Style>

Richtext toolbox

By default, when the mouse reaches the top border of the textedit field where rich text editing has been enabled, a toolbox appears. The toolbox disappears when the mouse leaves the top border area. This implementation is useful if you only use the textedit field to display rich text, as the toolbox is only visible in input.

If you want always display the toolbox, you can set the showEditToolBox styleAttribute.

<Style name="TextEdit.richText">
  <StyleAttribute name="textFormat" value="html" />
  <StyleAttribute name="showEditToolBox" value="yes" />
</Style>

Figure 2. Rich text editing interface with toolbox always displayed.

Tip: The textedit will be wide enough to display the toolbox in its entirety, even if you define a small width in your form definition file. Take this in account when designing your form.

Tip: The textedit will be high enough to display the number of lines defined in the form definition file (using the textedit font) and the toolbox when required. A textedit with a height of 1 will display the toolbox and one line, which is much higher than without the toolbox.

Important: The behavior of the attribute showEditToolBox with the value auto differs between the Genero Desktop Client and the Genero Web Client. With the Genero Desktop client, 'auto' is interpreted as 'no'. With the Genero Web Client, 'auto' is interpreted as 'yes'.

Rich text local actions

Local actions have been created for each rich text capability. As with any local action, you can configure accelerator keys, or you can bind them to action views like toolbar buttons.

Table 1. Local action names, accelerators, and icons

Name	Default Accelerator	Icon Name	Icon
richtextbold	Ctrl-b	textbold
richtextitalic	Ctrl-i	textitalic
richunderline	Ctrl-u	textunder
richtextalignleft	Ctrl-l	textleft
richtextaligncenter	Ctrl-e	textcenter
richtextalignright	Ctrl-r	textright
richtextalignjustify	Ctrl-j	textjustify
richtextlistbullet	None	textlistbullet
richtextlistdecimal	None	textlistnumbered
richtextdecreaseident	None	textindentdecrease
richtextincreaseident	None	textindentincrease
richtextdecreasefontsize	None	textfontsizedown
richtextincreasefontsize	None	textfontsizeup

You can hide the toolbox using the showEditToolBox styleAttribute.

<StyleAttribute name="textFormat" value="html" />
<StyleAttribute name="showEditToolBox" value="no" />