（通译）第二十五回 JavaFX2.0 Html编辑器 _HTML/CSS

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

原文地址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内容

用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 就是样例。

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组件。

1 楼 Tracyer 2011-10-29

lz辛苦了，很看好javafx，下在学习中，

2 楼 huhuanqadn 2011-11-14

博主确实辛苦了哦。