在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 {
@Override
public 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 {
@Override
public 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 {
@Override
public 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 = "测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容测试文本内容";
@Override
public 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 root
stage.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>";
@Override
public 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 root
stage.setScene(scene);//舞台上挂载场景
stage.show();//舞台效果展现播放
}
public static void main(String[] args) {
launch(args);
}
}
从htmlEditor组件中获得的HTML代码被加载到WebEngine对象中，这样可以为内置浏览器设置内容。每当用户点击“Load Content in Browser”按钮时，被编辑的内容就会更新到浏览器中
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
