（翻译）第二十五回 JavaFX2.0 Html编辑器

来源：互联网发布：linux 最好压缩编辑：程序博客网时间：2024/04/30 11:04

原文地址http://download.oracle.com/javafx/2.0/ui_controls/editor.htm

HTMLEditor控件是一个全功能的富文本编辑器。除了基本编辑功能外，它还支持以下特性：

文本格式，包括粗体、斜体、下划线等等
段落设置，比如格式、字体、字号
前景和背景颜色
文本缩进
圆点和数字列表
文本对齐
添加水平标尺
复制和粘贴文本块

Figure 19-1 是一个JavaFX应用中的富文本编辑器。

Figure 19-1 HTML Editor

Description of "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 ，这是一个用户正在排版周报。

Figure 19-5 Email Client User Interface

Description of "Figure 19-5 Email Client User Interface"

调用setPrefWidth 或 setPrefHeight方法为 HTMLEditor对象设置宽或高 ，当然根本不指定也行。Example 19-4 中为组件高度指定了值，而宽度由VBox悲剧容器控制了。当内容文本超出了编辑区的宽度和高度时，垂直滚动条就显示出来。

获取HTML内容

用JavaFXHTMLEditor控件，你可以编辑和设置初始内容。此外，你还可以以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 就是样例。

Figure 19-6 Obtaining the HTML Content

Description of "Figure 19-6 Obtaining the HTML Content"

类似地，也可以获得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 运行的效果。

Figure 19-7 Loading Content in a Browser

Description of "Figure 19-7 Loading Content in a Browser"

使用Text 组件来添加非编辑文本内容。到Using Text and Text Effects in JavaFX 了解更多Text组件。