原文地址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组件。