DOC-03-21 HTML编辑器(HTML Editor)

本章你将学习在JavaFX应用程序中使用内置的HTML编辑器来编辑文本。

HTMLEditor控件是一个功能完整的富文本编辑器。它的实现是基于HTML5的文档编辑特征,并且包括以下编辑功能:

· 文本格式化,包括通过样式控制粗体、斜体、下划线和删除线

· 段落设置,如格式、字体家族、字体大小

· 前景色和背景色

· 文本缩进

· 项目符号和编号

· 文本对齐

· 添加水平分隔线

· 复制和粘贴文本片段

图21-1展示了一个添加到JavaFX应用程序中的富文本编辑器。

21-1 HTML Editor

3-21-1 editor-sample

HTMLEditor类采用HTML字符串的形式来表示编辑的内容。例如,图21-1中输入的内容是通过下面的字符串来表示的:“<html><head></head><body contenteditable=”true”><h1>Heading</h1><div><u>Text</u>, some text</div></body></html>”。

由于HTMLEditor是Node类的扩展,你可以在其实例上应用视觉特效和变换。

添加一个HTML Editor

和任何其他UI控件一样,HTMLEditor组件也必须要添加到scene中才能在应用程序中显示。你可以如例21-1所示直接将其添加到scene中,或者如后面的其他样例所示使用一个布局容器。

21-1 添加一个HTML EditorJavaFX应用程序

编译和运行这段代码将会产生如图21-2所示的窗体。

21-2HTMLEditor组件的初始视图

3-21-2 editor-initial

HTMLEditor类提供了一个方法来定义应用程序启动时编辑区域中显示的内容。如例21-2所示,使用setHtmlText方法为编辑器设置初始文本。

21-2 设置文本内容

图21-3展示了使用setHTMLText方法设置了文本的编辑器。

21-3 带预定义文本内容的HTMLEditor

3-21-3 editor-text

你可以在这个字符串中使用HTML标签来为初始化内容设置特殊格式。

使用HTML Editor构建用户界面

你可以使用HTMLEditor在你的JavaFX应用程序中实现典型的用户界面。例如,你可以用它来实现即时通讯服务,Email客户端,甚至是内容管理系统的界面。

例21-3展示了一个在很多Email客户端应用程序中可见的邮件书写界面。

21-3添加HTMLEditorEmail客户端界面

这个用户界面包含了一个选择收信人类型的Choice Box,两个输入Email地址和邮件主题的Text Field,一个表示主题字段的Label,以及编辑器和Send按钮。

这些UI控件通过Grid和VBox布局容器在应用程序的scene中进行排列。编译并运行这个应用程序将会输出如图21-4所示的窗体,它展示用户在编辑周报时的界面。

21-4 Email客户端用户界面

3-21-4 editor-email

你可以通过调用setPrefWidth和setPrefHeight为HTMLEditor对象设置其宽度和高度,或者你可以任其宽度和高度为未指定状态。例21-3指定了组件的高度。它的宽度是由VBox布局容器来定义的。当文本内容超出了编辑区域的高度时,垂直滚动条就会出现。

获取HTML内容

在JavaFXHTMLEditor控件中,你可以编辑文本以及设置初始内容。另外,你也可以获取输入和编辑后的HTML格式文本。例21-4所示的程序实现了该任务。

21-4 获取HTML内容的代码

在HTMLEditor对象上调用的getHTMLText方法可以获取到被编辑的内容并以一个HTML字符串的形式返回。这个信息被传递给了Text Area,于是你可以查看、复制和粘贴产生的HTML代码。图21-5展示了HTMLEditor示例中正在被编辑文本的HTML代码。

21-5 获取HTML内容

3-21-5 editor-get-content

同样的,你可以获取HTML代码,并且将其保存到文件中,或者将它传递给WebView对象来同步编辑器和内置浏览器的内容。参考例21-5来了解如何实现此任务。

21-5 在浏览器中展现被编辑的HTML内容

从htmlEditor组件中获得的HTML代码被加载到WebEngine对象中,这样可以为内置浏览器设置内容。每当用户点击“Load Content in Browser”按钮时,被编辑的内容就会更新到浏览器中。图21-6展示了例21-5的运行结果。

21-6 把内容加载到浏览器中

3-21-6 editor-browser

你可以使用Text组件来将不可编辑的文本内容添加到你的界面上。请看“在JavaFX中使用Text”章节以获取更多关于Text组件的信息。

相关的API文档

· HTMLEditor

· WebView

· WebEngine

· Label

· Button

· TextField

· ChoiceBox

· ScrollPane

· TextFlow

打赏一下
支付宝
微信
除非注明,博客文章均为原创,转载请标明文章地址
本文地址: http://www.javafxchina.net/blog/2015/04/doc03_htmleditor/
百度已收录