原文地址http://download.oracle.com/javafx/2.0/ui_controls/editor.htm
HTMLEditor控件是一个全功能的富文本编辑器。除了基本编辑功能外，它还支持以下特性：
-
文本格式，包括粗体、斜体、下划线等等
-
段落设置，比如格式、字体、字号
-
前景和背景颜色
-
文本缩进
-
圆点和数字列表
-
文本对齐
-
添加水平标尺
-
复制和粘贴文本块
Figure 19-1 是一个JavaFX应用中的富文本编辑器。
Figure 19-1 HTML Editor
HTMLEditor 类呈现编辑内容使用的是HTML字符串形式，比如说，Figure 19-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组件必须加入场景才能在应用中显示。可以像 Example 19-1 这样直接添加，或者通过布局容器。
Example 19-1 Adding an HTML Editor to a JavaFX Application
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 Sample");
stage.setWidth(400);
stage.setHeight(300);
final HTMLEditor htmlEditor = new HTMLEditor();
htmlEditor.setPrefHeight(245);
Scene scene = new Scene(htmlEditor);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
编译运行上面的代码效果是 Figure 19-2 .
Figure 19-2 Initial View of the HTMLEditor Component
Description of "Figure 19-2 Initial View of the HTMLEditor Component"
实现该组件后就有格式栏，不能关闭它们。不过也可以使用CSS来改变其外观。见Example 19-2 .
Example 19-2 Styling the HTMLEditor
htmlEditor.setStyle(
"-fx-font: 12 cambria;"
+ "-fx-border-color: brown; "
+ "-fx-border-style: dotted;"
+ "-fx-border-width: 2;"
);
把它们加入到 Example 19-1 ，效果是Figure 19-3 .
Figure 19-3 Alternative View of the HTMLEditor Component
Description of "Figure 19-3 Alternative View of the HTMLEditor Component"
现在组件的边框和格式栏的字体改变了。
HTMLEditor 类提供了一个方法来定义应用启动后编辑区显示的内容。使用setHtmlText 方法来设置编辑器的初始文本，见Example 19-3。
Example 19-3 Setting the Text Content
private final String INITIAL_TEXT = "<html><body>Lorem ipsum dolor sit "
+ "amet, consectetur adipiscing elit. Nam tortor felis, pulvinar "
+ "in scelerisque cursus, pulvinar at ante. Nulla consequat"
+ "congue lectus in sodales. Nullam eu est a felis ornare "
+ "bibendum et nec tellus. Vivamus non metus tempus augue auctor "
+ "ornare. Duis pulvinar justo ac purus adipiscing pulvinar. "
+ "Integer congue faucibus dapibus. Integer id nisl ut elit "
+ "aliquam sagittis gravida eu dolor. Etiam sit amet ipsum "
+ "sem.</body></html>";
htmlEditor.setHtmlText(INITIAL_TEXT);
Figure 19-4 是使用setHTMLText 方法后的编辑器。
Figure 19-4 HTMLEditor with the Predefined Text Content
Description of "Figure 19-4 HTMLEditor with the Predefined Text Content"
可以在字符串中使用HTML标签来指定初始显示的文本格式。
用HTML Editor构建用户接口
能够使用 HTMLEditor 控件来实现典型的用户接口，比如说可以实现消息服务、email客户端、甚至内容管理系统。
下面实现一个消息排版窗口，在很多email客户端应用中都可以找到它。
Example 19-4 HTMLEditor Added to the Email Client UI
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 HTMLEditorSample extends Application {
@Override
public void start(Stage stage) {
stage.setTitle("Message Composing");
stage.setWidth(500);
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);
grid.getChildren().add(sendTo);
final TextField tbTo = new TextField();
tbTo.setPrefWidth(400);
GridPane.setConstraints(tbTo, 1, 0);
grid.getChildren().add(tbTo);
final Label subjectLabel = new Label("Subject:");
GridPane.setConstraints(subjectLabel, 0, 1);
grid.getChildren().add(subjectLabel);
final TextField tbSubject = new TextField();
tbTo.setPrefWidth(400);
GridPane.setConstraints(tbSubject, 1, 1);
grid.getChildren().add(tbSubject);
root.getChildren().add(grid);
final HTMLEditor htmlEditor = new HTMLEditor();
htmlEditor.setPrefHeight(370);
root.getChildren().addAll(htmlEditor, new Button("Send"));
final Label htmlLabel = new Label();
htmlLabel.setWrapText(true);
scene.setRoot(root);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
该接口包括一个选项框来选择接受类型，2个文本框来输入email地址和主题，一个标签来显示主题字段，一个编辑器，还有发送按钮。
使用Grid 和VBox布局容器把这些UI控件加入到应用的场景中。编译运行的效果见 Figure 19-5 ，这是一个用户正在排版周报。
调用setPrefWidth 或 setPrefHeight方法为 HTMLEditor对象设置宽或高 ，当然根本不指定也行。Example 19-4 中为组件高度指定了值，而宽度由VBox悲剧容器控制了。当内容文本超出了编辑区的宽度和高度时，垂直滚动条就显示出来。
获取HTML内容
用JavaFX HTMLEditor控件，你可以编辑和设置初始内容。此外，你还可以以HTML格式获得输入的和编辑的内容。具体实现见 Example 19-5
Example 19-5 Retrieving HTML Code
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
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 HTMLEditorSample extends Application {
private final String INITIAL_TEXT = "Lorem ipsum dolor sit "
+ "amet, consectetur adipiscing elit. Nam tortor felis, pulvinar "
+ "in scelerisque cursus, pulvinar at ante. Nulla consequat"
+ "congue lectus in sodales. Nullam eu est a felis ornare "
+ "bibendum et nec tellus. Vivamus non metus tempus augue auctor "
+ "ornare. Duis pulvinar justo ac purus adipiscing pulvinar. "
+ "Integer congue faucibus dapibus. Integer id nisl ut elit "
+ "aliquam sagittis gravida eu dolor. Etiam sit amet ipsum "
+ "sem.";
@Override
public void start(Stage stage) {
stage.setTitle("HTMLEditor Sample");
stage.setWidth(500);
stage.setHeight(500);
Scene scene = new Scene(new 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();
htmlEditor.setPrefHeight(245);
htmlEditor.setHtmlText(INITIAL_TEXT);
final TextArea htmlCode = new TextArea();
htmlCode.setWrapText(true);
ScrollPane scrollPane = new ScrollPane();
scrollPane.getStyleClass().add("noborder-scroll-pane");
scrollPane.setContent(htmlCode);
scrollPane.setFitToWidth(true);
scrollPane.setPrefHeight(180);
Button showHTMLButton = new Button("Produce HTML Code");
root.setAlignment(Pos.CENTER);
showHTMLButton.setOnAction(new EventHandler<ActionEvent>() {
@Override public void handle(ActionEvent arg0) {
htmlCode.setText(htmlEditor.getHtmlText());
}
});
root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane);
scene.setRoot(root);
stage.setScene(scene);
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
getHTMLText方法获得了编辑内容并以HTML字符串形式呈现。该内容传递给文本区，这样就能查看、复制、粘贴这些HTML代码。 Figure 19-6 就是样例。
类似地，也可以获得HTML代码比in个保存为文件或者发送到WebView对象，以同步编辑器和绑定的浏览器中的内容。 下面实现了这个任务 Example 19-6 .
Example 19-6 Rendering Edited HTML Content in a Browser
import javafx.application.Application; import javafx.event.ActionEvent; import javafx.event.EventHandler; 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 HTMLEditorSample extends Application { private final String INITIAL_TEXT = "Lorem ipsum dolor sit " + "amet, consectetur adipiscing elit. Nam tortor felis, pulvinar " + "in scelerisque cursus, pulvinar at ante. Nulla consequat" + "congue lectus in sodales. Nullam eu est a felis ornare " + "bibendum et nec tellus. Vivamus non metus tempus augue auctor " + "ornare. Duis pulvinar justo ac purus adipiscing pulvinar. " + "Integer congue faucibus dapibus. Integer id nisl ut elit " + "aliquam sagittis gravida eu dolor. Etiam sit amet ipsum " + "sem."; @Override public void start(Stage stage) { stage.setTitle("HTMLEditor Sample"); stage.setWidth(500); stage.setHeight(500); Scene scene = new Scene(new 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(); htmlEditor.setPrefHeight(245); htmlEditor.setHtmlText(INITIAL_TEXT); final WebView browser = new WebView(); final WebEngine webEngine = browser.getEngine(); ScrollPane scrollPane = new ScrollPane(); scrollPane.getStyleClass().add("noborder-scroll-pane"); scrollPane.setStyle("-fx-background-color: white"); scrollPane.setContent(browser); scrollPane.setFitToWidth(true); scrollPane.setPrefHeight(180); Button showHTMLButton = new Button("Load Content in Browser"); root.setAlignment(Pos.CENTER); showHTMLButton.setOnAction(new EventHandler<ActionEvent>() { @Override public void handle(ActionEvent arg0) { webEngine.loadContent(htmlEditor.getHtmlText()); } }); root.getChildren().addAll(htmlEditor, showHTMLButton, scrollPane); scene.setRoot(root); stage.setScene(scene); stage.show(); } public static void main(String[] args) { launch(args); } }
从htmlEditor 组件获得HTML代码加载到WebEngine 对象来指定绑定浏览器的内容。每次用户点击Load Content in Browser按钮，编辑的文本就更新到浏览器中。Figure 19-7 是Example 19-6 运行的效果。
使用Text 组件来添加非编辑文本内容。到Using Text and Text Effects in JavaFX 了解更多Text组件。