日期:2014-05-17  浏览次数:20650 次

(翻译)第二十五回 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 follows
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 follows
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 follows
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);