1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
---
title: RichTextArea
order: 12
layout: page
---
[[components.richtextarea]]
= [classname]#RichTextArea#
ifdef::web[]
[.sampler]
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/data-input/text-input/rich-text-area"]
endif::web[]
The [classname]#RichTextArea# field allows entering or editing formatted text.
The toolbar provides all basic editing functionalities. The text content of
[classname]#RichTextArea# is represented in HTML format.
[classname]#RichTextArea# inherits [classname]#TextField# and does not add any
API functionality over it. You can add new functionality by extending the
client-side components [classname]#VRichTextArea# and
[classname]#VRichTextToolbar#.
As with [classname]#TextField#, the textual content of the rich text area is the
[classname]#Property# of the field and can be set with [methodname]#setValue()#
and read with [methodname]#getValue()#.
[source, java]
----
// 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>");
----
.Rich Text Area Component
image::img/richtextarea-example1.png[width=60%, scaledwidth=90%]
Above, we used context-specific tags such as [literal]#++<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 ( [literal]#++\n++#)
are removed from the content. For example, the value set above will be as
follows when read from the field with [methodname]#getValue()#:
[source, html]
----
<h1>Hello</h1> <p>This rich text area contains some text.</p>
----
[WARNING]
.Cross-Site Scripting Warning
====
The user input from a [classname]#RichTextArea# is transmitted as HTML from the
browser to server-side and is not sanitized. As the entire purpose of the
[classname]#RichTextArea# component is to allow input of formatted text, you can
not sanitize it just by removing all HTML tags. Also many attributes, such as
[parameter]#style#, should pass through the sanitization.
See
<<dummy/../../../framework/advanced/advanced-security#advanced.security.sanitizing,"Sanitizing
User Input to Prevent Cross-Site Scripting">> for more details on Cross-Site
scripting vulnerabilities and sanitization of user input.
====
ifdef::web[]
[[components.richtextarea.localization]]
== Localizing RichTextArea Toolbars
The rich text area is one of the few components in Vaadin that contain textual
labels. The selection boxes in the toolbar are in English and currently can not
be localized in any other way than by inheriting or reimplementing the
client-side [classname]#VRichTextToolbar# 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.
[source, css]
----
.v-richtextarea-richtextexample .gwt-ToggleButton
.gwt-Image {
background-image: url(img/richtextarea-toolbar-fi.png)
!important;
}
----
.Regular English and a Localized Rich Text Area Toolbar
image::img/richtextarea-toolbar-whitebg.png[]
endif::web[]
== CSS Style Rules
[source, css]
----
.v-richtextarea { }
.v-richtextarea .gwt-RichTextToolbar { }
.v-richtextarea .gwt-RichTextArea { }
----
The rich text area consists of two main parts: the toolbar with overall style
[literal]#++.gwt-RichTextToolbar++# and the editor area with style
[literal]#++.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:
[source, css]
----
.gwt-ToggleButton { }
.gwt-ListBox { }
----
|
