×
关于

Vaadin Web 开发教程

概述安装开发环境Vaadin 应用程序框架介绍开始编写 Web 应用Vaadin Web 应用的基本组成部分使用资源UI 组件概述UI 组件-LabelUI 組件-LinkUI 組件-TextFieldUI 組件-TextAreaUI 組件-PasswordFieldUI 組件-RichTextAreaUI 組件-ButtonUI 組件-CheckboxUI 组件-Select 组件UI 组件-Table 组件UI 组件-Tree 组件UI 组件-MenuBar 组件UI 组件-Embedded 组件UI 组件-Upload 组件UI 组件-Form 组件UI 组件-ProgressIndicator 组件UI 组件-Slider 组件UI 组件-LoginForm 组件UI 组件-自定义组件UI 布局-概述UI 布局-VerticalLayout 和 HorizontalLayout 布局UI 布局-GridLayout 布局UI 布局-FormLayout 布局UI 布局-PanelUI 布局-HorizontalSplitPanel 和 VerticalSplitPanel 布局UI 布局-TabSheet 布局UI 布局-Accordion 布局UI 布局-AbsoluteLayout 布局可視化界面編輯插件使用主题-概述使用主题-创建和应用新主题数据绑定-概述数据绑定-Property 接口使用 Item 介面管理一組 Property使用 Container 介面管理一組 ItemSQLContainer 概述开始使用 SQLContainerSQLContainer-过滤及排序SQLContainer-编辑SQLContainer-引用其它 SQLContainerSQLContainer-使用 FreeformQuery

UI 組件-RichTextArea


RichTextArea 允許輸入帶格式的文本。 RichTextArea 內容以 HTML 格式顯示。它繼承自TextArea,本身沒有提供什麼附加功能,你可以通過擴展 VRichTextArea, VRichTextToolbar 的方法來為 RichTextArea 添加客戶端功能。

// 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>");

可以看到 RichTextArea 控制項本身帶有一個工具條,其中的選擇框使用英語而不支持本地化,但你可以通過派生或重新定義 VRichTextToolbar 來實現本地化。 而工具條上按鈕可以通過 CSS 重新定義來實現本地化。 例如:

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

下圖為英語和本地化的 RichTextArea 工具條上按鈕。

Tags: Java EE, Vaadin, Web


分类导航

关注微信下载离线手册

bootwiki移动版 bootwiki
(群号:472910771)