2. 程式人生 > >JavaFX UI控制元件教程（二十）之HTML Editor

JavaFX UI控制元件教程（二十）之HTML Editor

阿新 • • 發佈：2018-11-10

翻譯自  HTML Editor

在本章中，您將學習如何使用嵌入式HTML編輯器編輯JavaFX應用程式中的文字。

該HTMLEditor控制元件是一個功能齊全的富文字編輯器。它的實現基於HTML5的文件編輯功能，包括以下編輯功能：

  • 文字格式包括粗體，斜體，下劃線和樣式

  • 段落設定，例如格式，字體系列和字型大小

  • 前景色和背景色

  • 文字縮排

  • 專案符號和編號列表

  • 文字對齊

  • 新增水平規則

  • 複製和貼上文字片段

圖19-1顯示了新增到JavaFX應用程式的富文字編輯器。

圖19-1 HTML編輯器

該HTMLEditor班於在一個HTML字串的形式編輯內容。例如，圖19-1中編輯器中鍵入的內容由以下字串表示：“ <html><head></head><body contenteditable="true"><h1>Heading</h1><div><u>Text</u>, some text</div></body></html>。”

因為HTMLEditor類是類的擴充套件，所以Node可以將視覺效果或轉換應用於其例項。

 

新增HTML編輯器

與任何其他UI控制元件一樣，HTMLEditor必須將元件新增到場景中，以便它可以顯示在應用程式中。您可以將其直接新增到場景中，如示例19-1所示，也可以通過佈局容器將其新增到其他示例中。

示例19-1將HTML編輯器新增到JavaFX應用程式

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);
    }
}

編譯並執行此程式碼片段會生成如圖19-2所示的視窗。

圖19-2 HTMLEditor元件的初始檢視

格式工具欄在元件的實現中提供。您無法切換其可見性。但是，您仍然可以通過應用CSS樣式來自定義編輯器的外觀，如例19-2所示。

例19-2為HTMLEditor設定樣式

htmlEditor.setStyle(
    "-fx-font: 12 cambria;"
    + "-fx-border-color: brown; "
    + "-fx-border-style: dotted;"
    + "-fx-border-width: 2;"
);

將此程式碼行新增到示例19-1後，編輯器將更改，如圖19-3所示。

圖19-3 HTMLEditor元件的備用檢視

應用的樣式更改元件的邊框和格式工具欄的字型。

的HTMLEditor類提供了定義在應用程式啟動時出現在編輯區域中的內容的方法。使用該setHtmlText方法，如例19-3所示，設定編輯器的初始文字。

示例19-3設定文字內容

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);

圖19-4演示了使用該setHTMLText方法設定文字的文字編輯器。

圖19-4帶有預定義文字內容的HTMLEditor

您可以使用此字串中的HTML標記為最初呈現的內容應用特定格式。

 

使用HTML編輯器構建使用者介面

您可以使用該HTMLEditor控制元件在JavaFX應用程式中實現典型的使用者介面（UI）。例如，您可以實現即時訊息服務，電子郵件客戶端甚至內容管理系統。

顯示可在許多電子郵件客戶端應用程式中找到的訊息編寫視窗的使用者介面。

示例19-4 HTMLEditor已新增到電子郵件客戶端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);
    }
}

使用者介面包括用於選擇收件人型別的選擇框，用於輸入電子郵件地址和郵件主題的兩個文字欄位，用於指示主題欄位的標籤，編輯器和傳送按鈕。

UI控制元件通過使用Grid和VBox佈局容器排列在應用程式場景中。編譯並執行此應用程式時，圖19-5中顯示的視窗顯示了當使用者編寫每週報告時此應用程式的輸出。

圖19-5電子郵件客戶端使用者介面

您可以HTMLEditor通過呼叫setPrefWidth或setPrefHeight方法設定物件的特定寬度和高度值，也可以不指定其寬度和高度。例19-4指定了元件的高度。其寬度由VBox佈局容器定義。當文字內容超出編輯區域的高度時，將出現垂直滾動條。

 

獲取HTML內容

使用JavaFX HTMLEditor控制元件，您可以編輯文字並設定初始內容。此外，您還可以獲取HTML格式的輸入和編輯文字。例19-5中顯示的應用程式實現了此任務。

示例19-5檢索HTML程式碼

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呼叫HTMLEditor物件的方法派生編輯的內容並將其呈現為HTML字串。此資訊將傳遞到文字區域，以便您可以觀察，複製和貼上生成的HTML程式碼。圖19-6顯示了正在HTMLEditor示例中編輯的文字的HTML程式碼。

圖19-6獲取HTML內容

同樣，您可以獲取HTML程式碼並將其儲存在檔案中，或將其傳送到WebView物件以在編輯器和嵌入式瀏覽器中同步內容。請參見例19-6中如何實現此任務。

示例19-6在瀏覽器中呈現已編輯的HTML內容

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到指定嵌入式瀏覽器內容的物件中。每次使用者單擊“在瀏覽器中載入內容”按鈕時，編輯的內容都會在瀏覽器中更新。圖19-7演示了例項19-6的實際應用。

圖19-7在瀏覽器中載入內容

您可以使用該Text元件將非編輯文字內容新增到UI。有關該元件的更多資訊，請參閱在JavaFX中使用文字和文字效果Text。

 

相關的API文件 

相關推薦

JavaFX UI控制元件教程（二十）之HTML Editor

翻譯自  HTML Editor 在本章中，您將學習如何使用嵌入式HTML編輯器編輯JavaFX應用程式中的文字。 該HTMLEditor控制元件是一個功能齊全的富文字編輯器。它的實現基於HTML5的文件編輯功能，包括以下編輯功能： 文字格式包括粗體，斜體，下

JavaFX UI控制元件教程（二十三）之Menu

翻譯自  Menu 本章介紹如何建立選單和選單欄，新增選單項，將選單分組，建立子選單以及設定上下文選單。 您可以使用以下JavaFX API類在JavaFX應用程式中構建選單。 選單欄 選單項 選單 CheckMen

JavaFX UI控制元件教程（二十四）之Password Field

翻譯自  Password Field 在本章中，您將瞭解另一種型別的文字控制元件，即密碼欄位。 本PasswordField類實現一個專門的文字欄位。通過顯示回顯字串來隱藏使用者鍵入的字元。圖23-1顯示了一個密碼欄位，其中包含提示訊息。 圖23-1帶有提示訊

JavaFX UI控制元件教程（二十一）之Tooltip

翻譯自  Tooltip 在本章中，您將瞭解工具提示，即當滑鼠游標懸停該控制元件時，可以為任何UI控制元件設定的控制元件。 的Tooltip類表示通常用於顯示關於所述使用者介面的控制附加資訊的公共UI元件。可以通過呼叫setTooltip方法在任何控制元件上設定工具提示。

JavaFX UI控制元件教程（二十二）之Titled Pane和Accordion

翻譯自  Titled Pane and Accordion 本章介紹如何在JavaFX應用程式中使用accordion和title窗格的組合。 標題窗格是帶標題的面板。它可以開啟和關閉，它可以封裝任何Node諸如UI控制元件或影象以及新增到佈局容器的元素組。 標題窗

JavaFX UI控制元件教程（二十七）之File Chooser

翻譯自  File Chooser 本章介紹如何使用FileChooser該類使使用者能夠導航檔案系統。本章提供的示例說明了如何開啟一個或多個檔案，配置檔案選擇器對話方塊視窗以及儲存應用程式內容。 與其他使用者介面元件類不同，FileChooser該類不屬於該javafx

JavaFX UI控制元件教程（二十六）之Pagination Control

翻譯自  Pagination Control 本章介紹如何向JavaFX應用程式新增分頁控制元件。它教授如何嚮應用程式新增分頁控制元件，管理其頁面項，以及使用CSS樣式設定控制元件元素的樣式。 分頁控制元件，用於瀏覽分成較小部分的多頁內容。典型用途包括瀏覽郵箱中的電子郵

JavaFX UI控制元件教程（二十五）之Color Picker

翻譯自  Color Picker 本章介紹ColorPicker控制元件，提供其設計概述，並說明如何在JavaFX應用程式中使用它。 JavaFX SDK中的顏色選擇器控制元件是一個典型的使用者介面元件，使使用者可以從可用範圍中選擇特定顏色，或通過指定RGB或HSB組合

JavaFX UI控制元件教程（二十八）之UI控制元件的自定義

翻譯自  Customization of UI Controls 本章介紹了UI控制元件自定義的各個方面，並總結了Oracle提供的一些提示和技巧，以幫助您修改UI控制元件的外觀和行為。 您可以通過應用層疊樣式表（CSS），重新定義預設行為和使用單元工廠來學習如何從UI

JavaFX UI控制元件教程（十五）之Combo Box

翻譯自   Combo Box 本章介紹如何在JavaFX應用程式中使用組合框。它討論了可編輯和不可編輯的組合框，教您如何跟蹤可編輯組合框中的更改並處理它們上的事件，並解釋如何使用單元工廠來更改組合框的預設實現。 組合框是使用者介面的典型元素，使使用者可以選擇多個選項之一

JavaFX UI控制元件教程（十九）之Hyperlink

翻譯自   Hyperlink 本章介紹Hyperlink用於將文字格式化為超連結的控制元件。 所述Hyperlink類表示另一種型別的Labeled控制。圖18-1演示了預設超連結實現的三種狀態。 圖18-1超連結控制的三種狀態  

JavaFX UI控制元件教程（十八）之Progress Bar和Progress Indicator

翻譯自  Progress Bar and Progress Indicator 在本章中，您將瞭解進度指示器和進度條，以及視覺化JavaFX應用程式中任何操作進度的UI控制元件。 本ProgressIndicator類及其直接子類ProgressBar所提供的功能，以表

JavaFX UI控制元件教程（十七）之Slider

翻譯自   Slider 在本章中，您將學習如何在JavaFX應用程式中使用滑塊來顯示和與一系列數值進行互動。 該Slider控制元件由一個軌道和一個可拖動的拇指組成。它還可以包括刻度線和刻度標籤，用於指示範圍的數值。圖16-1顯示了一個典型的滑塊並指出了它的主要元素。

JavaFX UI控制元件教程（十六）之Separator

翻譯自  Separator 本章介紹如何使用分隔符組織JavaFX應用程式的UI元件。 SeparatorJavaFX API中可用的類表示水平或垂直分隔線。它用於劃分應用程式使用者介面的元素，不會產生任何操作。但是，您可以設定樣式，對其應用視覺效果，甚至為其設定動畫。

JavaFX UI控制元件教程（六）之Toggle Button

在本章中，您將瞭解ToggleButton該類，這是通過JavaFX API提供的另一種型別的按鈕。 可以將兩個或多個切換按鈕組合成一個組，其中一次只能選擇一個按鈕，或者不需要選擇。圖5-1是組合了三個切換按鈕的應用程式的截圖。應用程式根據選擇的切換按鈕繪製具有特定顏色

JavaFX UI控制元件教程（五）之Radio Button

本章討論單選按鈕控制元件和RadioButton類，該類的一個專門實現ToggleButton。 可以選擇或取消選擇單選按鈕控制元件。通常，單選按鈕組合成一個組，其中一次只能選擇一個按鈕。此行為將它們與切換按鈕區分開來，因為組中的所有切換按鈕都可以處於取消選擇狀態。

JavaFX UI控制元件教程（四）之Button

Button通過JavaFX API提供的類使開發人員能夠在使用者單擊按鈕時處理操作。該Button班是的擴充套件Labeled類。它可以顯示文字，影象或兩者。圖3-1顯示了具有各種效果的按鈕。在本章中，您將學習如何建立這些按鈕型別。 圖3-1按鈕型別

WPF教程（二十）密碼框

WPF中編輯常規的文字都是使用文字框，但是如果是輸入密碼呢？功能應該是一樣的，但是我們不想周邊的人看著我們一個字母一個字母的輸入，這樣密碼就被洩漏了，因此我們想用別的字元來替代真實密碼的顯示。出於這個目的，WPF有一個密碼框控制元件，用起來和文字框一樣。 <span

C語言入門（二十）之列舉

C語言中，列舉就是專門用於表示幾種固定型別的取值。列舉的本質就是基本資料型別, 就是整形。 列舉和結構體一樣, 要想定義列舉型別變數, 那麼必須先定義列舉型別。 列舉型別定義的格式   enum 列舉型別名稱 { 取值, }; // 1.

Java設計模式（二十）之行為型模式：狀態模式

 在介紹狀態模式之前，我們先來看這樣一個例項：你公司力排萬難終於獲得某個酒店的系統開發專案，並且最終落到了你的頭上。下圖是他們系統的主要工作(夠簡單)。 當你第一眼看到這個系統的時候你就看出來了這是一個狀態圖，每個框框都代表了房間的狀態，箭頭表示房間狀態的轉換。分析如下