原文链接：DOC-03-21 HTML编辑器(HTML Editor) | JavaFX中文资料
在JavaFX应用程序中使用内置的HTML编辑器来编辑文本
HTMLEditor控件是一个功能完整的富文本编辑器。它的实现是基于HTML5的文档编辑特征，并且包括以下编辑功能
· 文本格式化，包括通过样式控制粗体、斜体、下划线和删除线
· 段落设置，如格式、字体家族、字体大小
· 前景色和背景色
· 文本缩进
· 项目符号和编号
· 文本对齐
· 添加水平分隔线
· 复制和粘贴文本片段
下面的程序展示了一个添加到JavaFX应用程序中的富文本编辑器
HTMLEditor类采用HTML字符串的形式来表示编辑的内容
输入的内容是通过下面的字符串来表示的：“<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中才能在应用程序中显示，可以直接将其添加到scene中，或者使用一个布局容器对象装载HtmlEditor类型对象后间接再添加到scene对象中，予以展示
添加一个HTML Editor到JavaFX应用程序
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.web.HTMLEditor;import javafx.stage.Stage;public class HTMLEditorSample extends Application {@Overridepublic void start(Stage stage) {stage.setTitle("HTMLEditor例子");stage.setWidth(800);//舞台宽度设置stage.setHeight(600);//舞台高度设置final HTMLEditor htmlEditor = new HTMLEditor();//创建HTML富文本编辑器对象htmlEditor.setPrefHeight(500);//设置富文本编辑器对象高度Scene scene = new Scene(htmlEditor);//场景上加载挂载富文本编辑器对象stage.setScene(scene);//舞台设置场景stage.show();//舞台展现}public static void main(String[] args) {launch(args);}}
HTMLEditor类提供了一个方法来定义应用程序启动时编辑区域中显示的内容。如例所示，使用setHtmlText方法为编辑器设置初始文本。
import javafx.application.Application;import javafx.scene.Scene;import javafx.scene.web.HTMLEditor;import javafx.stage.Stage;public class HTMLEditorSample extends Application {@Overridepublic void start(Stage stage) {stage.setTitle("HTMLEditor例子");stage.setWidth(800);//舞台宽度设置stage.setHeight(600);//舞台高度设置final HTMLEditor htmlEditor = new HTMLEditor();//创建HTML富文本编辑器对象htmlEditor.setHtmlText("设置默认初始化文本内容");htmlEditor.setPrefHeight(500);//设置富文本编辑器对象高度Scene scene = new Scene(htmlEditor);//场景上加载挂载富文本编辑器对象stage.setScene(scene);//舞台设置场景stage.show();//舞台展现}public static void main(String[] args) {launch(args);}}
注意：
可以在这个字符串中使用HTML标签来为初始化内容设置特殊格式
使用HTML Editor构建用户界面
你可以使用HTMLEditor在你的JavaFX应用程序中实现典型的用户界面。例如，你可以用它来实现即时通讯服务，Email客户端，甚至是内容管理系统的界面。
下例：展示了一个在很多Email客户端应用程序中可见的邮件书写界面
import javafx.application.Application;import javafx.collections.FXCollections;import javafx.geometry.Insets;import javafx.geometry.Pos;import javafx.scene.Group;import javafx.scene.Scene;import javafx.scene.control.*;import javafx.scene.layout.GridPane;import javafx.scene.layout.VBox;import javafx.scene.web.HTMLEditor;import javafx.stage.Stage;public class HTMLEditorUi extends Application {@Overridepublic void start(Stage stage) {stage.setTitle("邮件客户端");stage.setWidth(650);//舞台宽度设置stage.setHeight(500);//舞台高度设置Scene scene = new Scene(new Group());//创建一个场景挂载节点组容器对象final VBox root = new VBox();//创建一个垂直盒子布局对象root.setPadding(new Insets(8, 8, 8, 8));//设置垂直布局盒子对象中的各个元素之间的间隙root.setSpacing(5);//设置垂直盒子对象元素之间的空间距离root.setAlignment(Pos.BOTTOM_LEFT);//设置布局盒子对象中的元素的对齐模式final GridPane grid = new GridPane();//设置网关面板布局对象grid.setVgap(5);//设置布局对象中垂直间隙距离grid.setHgap(10);//设置布局对象中水平间隙距离final ChoiceBox sendTo =new ChoiceBox(FXCollections.observableArrayList("To:", "Cc:", "Bcc:")//设置选项内容);//创建下拉选项对象sendTo.setPrefWidth(100);//设置选项框的宽度GridPane.setConstraints(sendTo, 0, 0);//设置网格布局对象的布局约束，将sendTo对象放置第一行第一列位置grid.getChildren().add(sendTo);//网格布局面板上添加sendTo对象final TextField tbTo = new TextField();//创建一个文本域框对象tbTo.setPrefWidth(400);//设置文本框对象宽度GridPane.setConstraints(tbTo, 1, 0);//设置网格布局对象的布局约束，将tbTo对象放置第一行第二列位置grid.getChildren().add(tbTo);//网格布局面板上添加tbTo对象final Label subjectLabel = new Label("发送主题:");//创建一个label文本标签对象GridPane.setConstraints(subjectLabel, 0, 1);//设置网格布局对象的布局约束，将subjectLabel对象放置第二行第一列位置grid.getChildren().add(subjectLabel);//网格布局面板上添加subjectLabel对象final TextField tbSubject = new TextField();//创建文本框对象tbSubject.setPrefWidth(400);//设置文本框的宽度GridPane.setConstraints(tbSubject, 1, 1);//设置网格布局对象的布局约束，将tbSubject对象放置第二行第二列位置grid.getChildren().add(tbSubject);//网格布局面板上添加tbSubject对象root.getChildren().add(grid);//节点组容器对象上添加表格布局面板final HTMLEditor htmlEditor = new HTMLEditor();//HTML富文本编辑器对象htmlEditor.setPrefHeight(370);//富文本编辑器对象设置高度root.getChildren().addAll(htmlEditor, new Button("发送"));//节点组容器对象上添加文本编辑器对象和按钮对象final Label htmlLabel = new Label();//标签对象的建立htmlLabel.setWrapText(true);//设置允许文本环绕效果scene.setRoot(root);//场景对象上添加根节点容器对象stage.setScene(scene);//舞台对象上添加场景对象stage.show();//舞台效果展现}public static void main(String[] args) {launch(args);}}
这个用户界面包含了一个选择收信人类型的Choice Box，两个输入Email地址和邮件主题的Text Field，一个表示主题字段的Label，以及编辑器和Send按钮。
这些UI控件通过Grid和VBox布局容器在应用程序的scene中进行排列
可以通过调用setPrefWidth和setPrefHeight为HTMLEditor对象设置其宽度和高度，或者你可以任其宽度和高度为未指定状态。指定了组件的高度。它的宽度是由VBox布局容器来定义的。当文本内容超出了编辑区域的高度时，垂直滚动条就会出现
获取HTML内容
在JavaFXHTMLEditor控件中，你可以编辑文本以及设置初始内容。另外，你也可以获取输入和编辑后的HTML格式文本
import javafx.application.Application;import javafx.event.ActionEvent;import javafx.geometry.Insets;import javafx.geometry.Pos;import javafx.scene.Group;import javafx.scene.Scene;import javafx.scene.control.*;import javafx.scene.layout.VBox;import javafx.scene.web.HTMLEditor;import javafx.stage.Stage;public class HtmlEditorTest extends Application {private final String INITIAL_TEXT = "测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容";@Overridepublic void start(Stage stage) {stage.setTitle("HTMLEditor例子");stage.setWidth(650);//舞台宽度设置stage.setHeight(500);//舞台高度设置Scene scene = new Scene(new Group());//创建一个场景挂载节点组容器对象VBox root = new VBox();//创建一个垂直盒子布局对象root.setPadding(new Insets(8, 8, 8, 8));//设置VBox布局对象中各个元素之间的内边距root.setSpacing(5);//设置垂直盒子对象元素之间的空隙距离root.setAlignment(Pos.BOTTOM_LEFT);//设置垂直盒子对象的对齐方式final HTMLEditor htmlEditor = new HTMLEditor();//创建html富文本编辑器htmlEditor.setPrefHeight(245);//设置富文本编辑器的高度htmlEditor.setHtmlText(INITIAL_TEXT);//设置富文本编辑器中的初始化内容final TextArea htmlCode = new TextArea();//创建TextArea类型对象htmlCode.setWrapText(true);//设置TextArea中的文本可以环绕包围ScrollPane scrollPane = new ScrollPane();//创建滚动面板对象scrollPane.getStyleClass().add("noborder-scroll-pane");//滚动面板对象上面设定无边框样式scrollPane.setContent(htmlCode);//给scrollPane对象上添加内容scrollPane.setFitToWidth(true);//给scrollPane设置固定宽度scrollPane.setPrefHeight(180);//给scrollPane对象上添加高度Button showHTMLButton = new Button("生成html代码");root.setAlignment(Pos.CENTER);//设置垂直盒子模型对象的对齐模式为居中对齐showHTMLButton.setOnAction((ActionEvent arg0) -> {//设置button组件的鼠标点击事件处理回调函数内容htmlCode.setText(htmlEditor.getHtmlText());//设置显示文本内容为从htmlEditor.getHtmlText()获取的文本内容});root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane);//向垂直盒子布局器中添加htmlEditor,showHTMLButton,scrollPane这三个组件对象scene.setRoot(root);//场景上挂载根节点对象为VBox rootstage.setScene(scene);//舞台上挂载场景stage.show();//舞台效果展现播放}public static void main(String[] args) {launch(args);}}
在HTMLEditor对象上调用的getHTMLText方法可以获取到被编辑的内容并以一个HTML字符串的形式返回。这个信息被传递给了Text Area，于是可以查看、复制和粘贴产生的HTML代码
同样的，你可以获取HTML代码，并且将其保存到文件中，或者将它传递给WebView对象来同步编辑器和内置浏览器的内容
把内容加载到浏览器中
import javafx.application.Application;import javafx.event.ActionEvent;import javafx.geometry.Insets;import javafx.geometry.Pos;import javafx.scene.Group;import javafx.scene.Scene;import javafx.scene.control.*;import javafx.scene.layout.VBox;import javafx.scene.web.HTMLEditor;import javafx.scene.web.WebEngine;import javafx.scene.web.WebView;import javafx.stage.Stage;public class HtmlEditorWebView extends Application {private final String INITIAL_TEXT = "<html><body><font color='blue'>测试内容</font></body></html>";@Overridepublic void start(Stage stage) {stage.setTitle("HTMLEditor获取富文本内容");stage.setWidth(650);//舞台宽度设置stage.setHeight(500);//舞台高度设置Scene scene = new Scene(new Group());//场景创建并挂载Group类型节点组对象VBox root = new VBox();//创建垂直盒子对象root.setPadding(new Insets(8, 8, 8, 8));//垂直盒子对象中添加间隙root.setSpacing(5);//垂直盒子对象上添加布局间隙root.setAlignment(Pos.BOTTOM_LEFT);//设置垂直盒子对象的对齐方式final HTMLEditor htmlEditor = new HTMLEditor();//创建HTML富文本编辑器htmlEditor.setPrefHeight(245);//设置富文本编辑器高度htmlEditor.setHtmlText(INITIAL_TEXT);//设置服务文本编辑器HTML格式内容final WebView browser = new WebView();//创建一个webView类型对象final WebEngine webEngine = browser.getEngine();//获取web浏览器引擎内核对象ScrollPane scrollPane = new ScrollPane();//创建一个滚动pane对象scrollPane.getStyleClass().add("noborder-scroll-pane");//添加滚动面板组件样式scrollPane.setStyle("-fx-background-color: red");//添加滚动面板组件样式背景颜色样式scrollPane.setContent(browser);//给scrollPane对象上面添加一个WebView类型内嵌浏览器对象scrollPane.setFitToWidth(true);//让scrollPane对象自适应宽度scrollPane.setPrefHeight(180);//设置scrollPane对象高度Button showHTMLButton = new Button("Load Content in Browser");//创建按钮组件root.setAlignment(Pos.CENTER);//设置布局对象的对齐方式showHTMLButton.setOnAction((ActionEvent arg0) -> {//设置button组件的鼠标点击事件处理回调函数内容webEngine.loadContent(htmlEditor.getHtmlText());//webEngine内核浏览器加载从富文本编辑器htmlEditor中获取的html格式内容并予以显示});root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane);//向垂直盒子布局器中添加htmlEditor,showHTMLButton,scrollPane这三个组件对象scene.setRoot(root);//场景上挂载根节点对象为VBox rootstage.setScene(scene);//舞台上挂载场景stage.show();//舞台效果展现播放}public static void main(String[] args) {launch(args);}}
从htmlEditor组件中获得的HTML代码被加载到WebEngine对象中，这样可以为内置浏览器设置内容。每当用户点击“Load Content in Browser”按钮时，被编辑的内容就会更新到浏览器中
