Javafx 简明教程

JavaFX - HTMLEditor

HTML editor 是一种文本编辑器，用户可以在 JavaFX 应用程序中创建和编辑 HTML 代码。一些常见的 HTML 文本编辑器包括 Notepad、Sublime Text、Atom、Vscode 等。

An HTML editor is a type of text editor where users can create and edit HTML code within the JavaFX application. Some of the popular HTML text editors include Notepad, Sublime Text, Atom, Vscode and so on.

Note - HTML 是一种用于开发 Web 应用程序的标记语言。

Note − The HTML is a markup language used for developing web applications.

在 JavaFX 中，HTML 编辑器由名为 HTMLEditor 的类表示。该类属于 javafx.scene.web 包。通过实例化该类，我们可以在 JavaFX 中嵌入一个 HTMLEditor 节点。

In JavaFX, the HTML editor is represented by a class named HTMLEditor. This class belongs to the package javafx.scene.web. By instantiating this class, we can embed an HTMLEditor node in JavaFX.

JavaFX HTMLEditor 提供以下功能 −

The JavaFX HTMLEditor provides the following features −

  1. It supports text indentation and alignment.

  2. We can create bulleted as well as numbered lists.

  3. It allows us to change the background and foreground colors.

  4. It also includes text styling features such as colors, bold, italic and underline.

  5. We can also set the font size and font family.

Embedding an HTMLEditor in JavaFX

如前所述，我们可以通过实例化 HTMLEditor 类直接在 JavaFX 应用程序中嵌入 HTML 编辑器。与其他 UI 控件类似，必须将 HTMLEditor 实例添加到 Scene 对象中，才能使其在 JavaFX 应用程序中显示。

As mentioned earlier, we can directly embed an HTML editor within the JavaFX application by instantiating the HTMLEditor class. Similar to other UI controls, it is necessary to add the HTMLEditor instance to the Scene object to make it visible in the JavaFX application.

Example

以下 JavaFX 程序演示如何将 HTML 编辑器嵌入到 JavaFX 应用程序中。将此代码保存在一个名为 JavafxHtmlEditor.java 的文件中。

The following JavaFX program demonstrates how to embed an HTML editor into a JavaFX application. Save this code in a file with the name 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 文件，请使用以下命令−

To compile and execute the saved Java file from the command prompt, use the following commands −

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

当我们执行上述代码时，它将生成以下输出。

When we execute the above code, it will generate the following output.

html editor output

Creating an HtmlEditor in JavaFX with predefined Text

我们还可以在 JavaFX 代码中提供带有所需样式的预定义文本。对于此操作，我们可以使用 HTMLEditor 类的 setHtmlText() 方法。此方法将 String 作为参数，并在 JavaFX 应用程序启动时在编辑区域中显示该内容。

We can also provide predefined text with desired styling through JavaFX code. For this operation, we can use the setHtmlText() method of the HTMLEditor class. This method takes a String as a parameter and displays that content in the editing area when the JavaFX application starts.

Example

以下是将创建带有预定义文本的 HTML 编辑器的 JavaFX 程序。将此代码保存在一个名为 HtmlEditorText.java 的文件中。

Following is the JavaFX program which will create an HTML editor with the predefined text. Save this code in a file with the name 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 文件。

Compile and execute the saved Java file from the command prompt using the following commands.

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

当我们执行上述代码时，它将生成以下输出。

When we execute the above code, it will generate the following output.

htmleditor text output

Generating HTML code using HtmlEditor in JavaFX

HTMLEditor 类提供一个名为 getHtmlText() 的方法来检索编辑区域的内容。此方法与 HTMLEditor 类的对象一起调用。

The HTMLEditor class provides a method named getHtmlText() to retrieve the content of the editing area. This method is called along with the object of HTMLEditor class.

Example

在以下 JavaFX 程序中，我们将创建一个用于创建和编辑内容的 HTML 编辑器，一个用于获取相应 HTML 代码的按钮和一个用于显示获取的代码的文本区域。将此代码保存在一个名为 HtmlgetText.java 的文件中。

In the following JavaFX program, we will create an HTML editor to create and edit content, a button to obtain respective HTML code and a text area to show obtained code. Save this code in a file with the name 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 文件。

Compile and execute the saved Java file from the command prompt using the following commands.

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 窗口，显示以下输出。

On executing, the above program generates a JavaFX window displaying the below output.

html gettext output