當(dāng)前位置：首頁(yè) > 前端技术 > HTML >内容正文

HTML

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

發(fā)布時(shí)間：2023/12/3 HTML 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaFX UI控件教程（二十）之HTML Editor 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

翻譯自??HTML Editor

在本章中，您將學(xué)習(xí)如何使用嵌入式HTML編輯器編輯JavaFX應(yīng)用程序中的文本。

該HTMLEditor控件是一個(gè)功能齊全的富文本編輯器。它的實(shí)現(xiàn)基于HTML5的文檔編輯功能，包括以下編輯功能：

文本格式包括粗體，斜體，下劃線和樣式
段落設(shè)置，例如格式，字體系列和字體大小
前景色和背景色
文字縮進(jìn)
項(xiàng)目符號(hào)和編號(hào)列表
文字對(duì)齊
添加水平規(guī)則
復(fù)制和粘貼文本片段

圖19-1顯示了添加到JavaFX應(yīng)用程序的富文本編輯器。

圖19-1 HTML編輯器

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

因?yàn)镠TMLEditor類是類的擴(kuò)展，所以Node可以將視覺(jué)效果或轉(zhuǎn)換應(yīng)用于其實(shí)例。

添加HTML編輯器

與任何其他UI控件一樣，HTMLEditor必須將組件添加到場(chǎng)景中，以便它可以顯示在應(yīng)用程序中。您可以將其直接添加到場(chǎng)景中，如示例19-1所示，也可以通過(guò)布局容器將其添加到其他示例中。

示例19-1將HTML編輯器添加到JavaFX應(yīng)用程序

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

編譯并運(yùn)行此代碼片段會(huì)生成如圖19-2所示的窗口。

圖19-2 HTMLEditor組件的初始視圖

格式工具欄在組件的實(shí)現(xiàn)中提供。您無(wú)法切換其可見(jiàn)性。但是，您仍然可以通過(guò)應(yīng)用CSS樣式來(lái)自定義編輯器的外觀，如例19-2所示。

例19-2為HTMLEditor設(shè)置樣式

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組件的備用視圖

應(yīng)用的樣式更改組件的邊框和格式工具欄的字體。

的HTMLEditor類提供了定義在應(yīng)用程序啟動(dòng)時(shí)出現(xiàn)在編輯區(qū)域中的內(nèi)容的方法。使用該setHtmlText方法，如例19-3所示，設(shè)置編輯器的初始文本。

示例19-3設(shè)置文本內(nèi)容

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方法設(shè)置文本的文本編輯器。

圖19-4帶有預(yù)定義文本內(nèi)容的HTMLEditor

您可以使用此字符串中的HTML標(biāo)記為最初呈現(xiàn)的內(nèi)容應(yīng)用特定格式。

使用HTML編輯器構(gòu)建用戶界面

您可以使用該HTMLEditor控件在JavaFX應(yīng)用程序中實(shí)現(xiàn)典型的用戶界面（UI）。例如，您可以實(shí)現(xiàn)即時(shí)消息服務(wù)，電子郵件客戶端甚至內(nèi)容管理系統(tǒng)。

顯示可在許多電子郵件客戶端應(yīng)用程序中找到的消息編寫窗口的用戶界面。

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

用戶界面包括用于選擇收件人類型的選擇框，用于輸入電子郵件地址和郵件主題的兩個(gè)文本字段，用于指示主題字段的標(biāo)簽，編輯器和發(fā)送按鈕。

UI控件通過(guò)使用Grid和VBox布局容器排列在應(yīng)用程序場(chǎng)景中。編譯并運(yùn)行此應(yīng)用程序時(shí)，圖19-5中顯示的窗口顯示了當(dāng)用戶編寫每周報(bào)告時(shí)此應(yīng)用程序的輸出。

圖19-5電子郵件客戶端用戶界面

您可以HTMLEditor通過(guò)調(diào)用setPrefWidth或setPrefHeight方法設(shè)置對(duì)象的特定寬度和高度值，也可以不指定其寬度和高度。例19-4指定了組件的高度。其寬度由VBox布局容器定義。當(dāng)文本內(nèi)容超出編輯區(qū)域的高度時(shí)，將出現(xiàn)垂直滾動(dòng)條。

獲取HTML內(nèi)容

使用JavaFX?HTMLEditor控件，您可以編輯文本并設(shè)置初始內(nèi)容。此外，您還可以獲取HTML格式的輸入和編輯文本。例19-5中顯示的應(yīng)用程序?qū)崿F(xiàn)了此任務(wù)。

示例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調(diào)用HTMLEditor對(duì)象的方法派生編輯的內(nèi)容并將其呈現(xiàn)為HTML字符串。此信息將傳遞到文本區(qū)域，以便您可以觀察，復(fù)制和粘貼生成的HTML代碼。圖19-6顯示了正在HTMLEditor示例中編輯的文本的HTML代碼。

圖19-6獲取HTML內(nèi)容

同樣，您可以獲取HTML代碼并將其保存在文件中，或?qū)⑵浒l(fā)送到WebView對(duì)象以在編輯器和嵌入式瀏覽器中同步內(nèi)容。請(qǐng)參見(jiàn)例19-6中如何實(shí)現(xiàn)此任務(wù)。

示例19-6在瀏覽器中呈現(xiàn)已編輯的HTML內(nèi)容

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到指定嵌入式瀏覽器內(nèi)容的對(duì)象中。每次用戶單擊“在瀏覽器中加載內(nèi)容”按鈕時(shí)，編輯的內(nèi)容都會(huì)在瀏覽器中更新。圖19-7演示了實(shí)例19-6的實(shí)際應(yīng)用。

圖19-7在瀏覽器中加載內(nèi)容

您可以使用該Text組件將非編輯文本內(nèi)容添加到UI。有關(guān)該組件的更多信息，請(qǐng)參閱在JavaFX中使用文本和文本效果Text。

相關(guān)的API文檔?

HTMLEditor
WebView
WebEngine
Label
Button
TextField
ChoiceBox
ScrollPane

總結(jié)

以上是生活随笔為你收集整理的JavaFX UI控件教程（二十）之HTML Editor的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：张朋
下一篇： JavaFX UI控件教程（二十一）之T