4.5. Rich Text Area

The RichTextArea field allows entering or editing formatted text. The toolbar provides all basic editing functionalities. The text content of RichTextArea is represented in HTML format. RichTextArea inherits TextField and does not add any API functionality over it. You can add new functionality by extending the client-side components IRichTextArea and IRichTextToolbar.

As with TextField, the textual content of the rich text area is the Property of the field and can be set with setValue() and read with getValue().

// Create a rich text area
final RichTextArea rtarea = new RichTextArea();
rtarea.setCaption("My Rich Text Area");

// Set initial content as HTML
rtarea.setValue("<h1>Hello</h1>\n<p>This rich text area contains some text.</p>");

Figure 4.6. Rich Text Area Component

Rich Text Area Component

Above, we used context-specific tags such as <h1> in the initial HTML content. The rich text area component does not allow creating such tags, only formatting tags, but it does preserve them unless the user edits them away. Any non-visible whitespace such as the new line character (\n) are removed from the content. For example, the value set above will be as follows when read from the field with getValue():

<h1>Hello</h1> <p>This rich text area contains some text.</p>

The rich text area is one of the few components in IT Mill Toolkit that contain textual labels. The selection boxes in the toolbar are in English, and not be localized currently otherwise but by inheriting or reimplementing the client-side IRichTextToolbar widget. The buttons can be localized simply with CSS by downloading a copy of the toolbar background image, editing it, and replacing the default toolbar. The toolbar is a single image file from which the individual button icons are picked, so the order of the icons is different from the rendered. The image file depends on the client-side implementation of the toolbar.

.i-richtextarea-richtextexample .gwt-ToggleButton .gwt-Image {
  background-image: url(img/richtextarea-toolbar-fi.png) !important;
}

Figure 4.7. Regular English and a Localized Rich Text Area Toolbar

Regular English and a Localized Rich Text Area Toolbar
Regular English and a Localized Rich Text Area Toolbar

CSS Style Rules

.i-richtextarea { }
.i-richtextarea .gwt-RichTextToolbar { }
.i-richtextarea .gwt-RichTextArea { }

The rich text area consists of two main parts: the toolbar with overall style .gwt-RichTextToolbar and the editor area with style .gwt-RichTextArea. The editor area obviously contains all the elements and their styles that the HTML content contains. The toolbar contains buttons and drop-down list boxes with the following respective style names:

.gwt-ToggleButton { }
.gwt-ListBox { }