JavaFX - HTML 編輯器

上一個
下一個

一個HTML 編輯器是一種文字編輯器，使用者可以在 JavaFX 應用程式中建立和編輯 HTML 程式碼。一些流行的 HTML 文字編輯器包括記事本、Sublime Text、Atom、Vscode 等。

注意 - HTML 是一種用於開發 Web 應用程式的標記語言。

在 JavaFX 中，HTML 編輯器由名為HTMLEditor的類表示。此類屬於javafx.scene.web包。透過例項化此類，我們可以在 JavaFX 中嵌入 HTMLEditor 節點。

JavaFX HTMLEditor 提供以下功能 -

  • 它支援文字縮排和對齊。

  • 我們可以建立專案符號列表和編號列表。

  • 它允許我們更改背景和前景色。

  • 它還包括文字樣式功能，例如顏色、粗體、斜體和下劃線。

  • 我們還可以設定字型大小和字體系列。

在 JavaFX 中嵌入 HTMLEditor

如前所述，我們可以透過例項化 HTMLEditor 類直接在 JavaFX 應用程式中嵌入 HTML 編輯器。與其他 UI 控制元件類似，需要將 HTMLEditor 例項新增到 Scene 物件才能使其在 JavaFX 應用程式中可見。

示例

以下 JavaFX 程式演示瞭如何在 JavaFX 應用程式中嵌入 HTML 編輯器。將此程式碼儲存在名為JavafxHtmlEditor.java的檔案中。

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.layout.*; 
import javafx.stage.Stage; 
import javafx.scene.web.HTMLEditor; 
public class JavafxHtmlEditor extends Application {
   @Override
   public void start(Stage stage) {
      // Instantiating HTMLEditor class 
      HTMLEditor editorhtml = new HTMLEditor(); 
      // including the HTMLEditor to Scene 
      Scene scene = new Scene(editorhtml, 600, 500); 
      // setting the stage to display editor 
      stage.setScene(scene); 
      stage.setTitle("HTML Editor in JavaFX");
      stage.show();  
   }
   public static void main(String[] args) {
      launch(args);
   }
}

要從命令提示符編譯並執行儲存的 Java 檔案，請使用以下命令 -

javac --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.web JavafxHtmlEditor.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.web JavafxHtmlEditor

輸出

當我們執行上述程式碼時，它將生成以下輸出。

HtmlEditor Output

使用預定義文字在 JavaFX 中建立 HtmlEditor

我們還可以透過 JavaFX 程式碼提供具有所需樣式的預定義文字。對於此操作，我們可以使用HTMLEditor類的setHtmlText()方法。此方法將字串作為引數，並在 JavaFX 應用程式啟動時在編輯區域中顯示該內容。

示例

以下是將建立具有預定義文字的 HTML 編輯器的 JavaFX 程式。將此程式碼儲存在名為HtmlEditorText.java的檔案中。

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.layout.*; 
import javafx.stage.Stage; 
import javafx.scene.web.HTMLEditor; 
public class HtmlEditorText extends Application {
   @Override
   public void start(Stage stage) {
      // Instantiating HTMLEditor class 
      HTMLEditor editorhtml = new HTMLEditor(); 
      // Setting the content for HTML Editor
      String 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.</body></html>";
      editorhtml.setHtmlText(text);
      // including the HTMLEditor to Scene 
      Scene scene = new Scene(editorhtml, 600, 500); 
      // setting the stage to display editor 
      stage.setScene(scene); 
      stage.setTitle("HTML Editor in JavaFX");
      stage.show();  
   }
   public static void main(String[] args) {
      launch(args);
   }
}

使用以下命令從命令提示符編譯並執行儲存的 Java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.web HtmlEditorText.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.web HtmlEditorText

輸出

當我們執行上述程式碼時，它將生成以下輸出。

HTMLEditor Output2

使用 JavaFX 中的 HtmlEditor 生成 HTML 程式碼

HTMLEditor類提供了一個名為getHtmlText()的方法來檢索編輯區域的內容。此方法與 HTMLEditor 類物件一起呼叫。

示例

在以下 JavaFX 程式中，我們將建立一個 HTML 編輯器來建立和編輯內容，一個按鈕來獲取相應的 HTML 程式碼以及一個文字區域來顯示獲取的程式碼。將此程式碼儲存在名為HtmlgetText.java的檔案中。

import javafx.application.Application; 
import javafx.scene.Scene; 
import javafx.scene.layout.*; 
import javafx.scene.control.*;
import javafx.stage.Stage; 
import javafx.scene.web.HTMLEditor; 
import javafx.event.ActionEvent;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
public class HtmlgetText extends Application {
   @Override
   public void start(Stage stage) {
      // Instantiating HTMLEditor class 
      HTMLEditor editorhtml = new HTMLEditor();
      editorhtml.setPrefHeight(300); 
      // Creating a Text area to show HTML Code
      TextArea code = new TextArea();
      ScrollPane pane = new ScrollPane();
      pane.setContent(code);
      pane.setFitToWidth(true);
      pane.setPrefHeight(300);
      // creating button to get code
      Button button = new Button("Get Code");
      button.setOnAction(a -> {
         code.setText(editorhtml.getHtmlText());
      });
      // Creating root
      VBox root = new VBox();      
      root.setPadding(new Insets(10));
      root.setSpacing(5);
      root.setAlignment(Pos.BOTTOM_LEFT);
      root.getChildren().addAll(editorhtml, button, pane);
      // including the HTMLEditor to Scene 
      Scene scene = new Scene(root, 625, 500); 
      // setting the stage to display editor 
      stage.setScene(scene); 
      stage.setTitle("HTML Editor in JavaFX");
      stage.show();  
   }
   public static void main(String[] args) {
      launch(args);
   }
}

使用以下命令從命令提示符編譯並執行儲存的 Java 檔案。

javac --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.web HtmlgetText.java
java --module-path %PATH_TO_FX% --add-modules javafx.controls,javafx.web HtmlgetText

輸出

執行後，上述程式將生成一個 JavaFX 視窗，顯示以下輸出。

HTMLEditor Output3
列印頁面
上一個
下一個
廣告