JavaFX - HTMLEditor

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 − The HTML is a markup language used for developing web applications.

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.

The JavaFX HTMLEditor provides the following features −

  • It supports text indentation and alignment.

  • We can create bulleted as well as numbered lists.

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

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

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

Embedding an HTMLEditor in 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

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

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

Output

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

HtmlEditor Output

Creating an HtmlEditor in JavaFX with predefined Text

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

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

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

Output

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

HTMLEditor Output2

Generating HTML code using HtmlEditor in JavaFX

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

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

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

Output

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

HTMLEditor Output3
Advertisements