JavaFX UI控件教程（二十）之HTML Editor
翻譯自??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 {@Overridepublic 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 {@Overridepublic 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.";@Overridepublic 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.";@Overridepublic 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文檔?
-
HTMLEditor
-
WebView
-
WebEngine
-
Label
-
Button
-
TextField
-
ChoiceBox
-
ScrollPane
總結
以上是生活随笔為你收集整理的JavaFX UI控件教程（二十）之HTML Editor的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 张朋
- 下一篇： 使用refs获取节点_闲庭信步聊前端 -