JavaFX HTML Editor Example

Andreas PomarolliJune 16th, 2016Last Updated: November 9th, 2023

0 777 6 minutes read

This is a JavaFX HTMLEditor Example. The HTMLEditor control provides a rich text editing capability to JavaFX application. It uses HTML as its data model. That is, the formatted text in HTMLEditor is stored in HTML format.

The following table shows an overview of the whole article:

1. Creating an HTMLEditor

1.1 The Code

1.2 The GUI

2. Styling HTMLEditor with CSS

2.1 The Code

2.2 The Stylesheet

2.3 The GUI

3. Setting an Initial Text to the HTMLEditor

3.1 The Code

3.2 The GUI

4. Using the HTML Editor

4.1 The Code

4.2 The GUI

5. Download Java Source Code

The following examples use Java SE 8 and JavaFX 2.2.

1. Creating an HTML Editor

1.1 The Code

FxHtmlEditorExample1.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class FxHtmlEditorExample1 extends Application
{
    public static void main(String[] args)
    {
        Application.launch(args);
    }
 
    @Override
    public void start(Stage stage)
    {
        // Create the HTMLEditor
        HTMLEditor htmlEditor = new HTMLEditor();
        // Set the Height of the HTMLEditor
        htmlEditor.setPrefHeight(300);
        // Set the Width of the HTMLEditor
        htmlEditor.setPrefWidth(600);
 
        // Create the Scene
        Scene scene = new Scene(htmlEditor);
        // Add the Scene to the Stage
        stage.setScene(scene);
        // Set the Title of the Stage
        stage.setTitle("A simple HTMLEditor Example");
        // Display the Stage
        stage.show();
    }
}

A HTMLEditor displays formatting toolbars with it. You cannot hide the toolbars. They can be styled using a CSS. Using the toolbars, you can:

Copy, cut, and paste text using the system clipboard
Apply text alignment
Indent text
Apply bulleted list and numbered list styles
Set foreground and background colors
Apply paragraph and heading styles with font family and font size
Apply formatting styles such as bold, italic, underline, and strikethrough
Add horizontal rulers

The control supports HTML5. Note that the toolbars do not allow you to apply all kinds of HTML. However, if you load a document that uses those styles, it allows you to edit them.

For example, you cannot create an HTML table directly in the control. However, if you load HTML content having HTML tables into the control, you will be able to edit the data in the tables.

The HTMLEditor does not provide API to load HTML content from a file to save its content to a file. You will have to write your own code to accomplish this.

An instance of the HTMLEditor class represents an HTMLEditor control. The class is included in the javafx.scene.web package. Use the default constructor, which is the only constructor provided, to create the HTMLEditor:

// Create the HTMLEditor
HTMLEditor htmlEditor = new HTMLEditor();
// Set the Height of the HTMLEditor
htmlEditor.setPrefHeight(300);
// Set the Width of the HTMLEditor
htmlEditor.setPrefWidth(600);

1.2 The GUI

The following image shows a very simple example of an HTMLEditor:

2. Styling HTML Editor with CSS

2.1 The Code

FxHtmlEditorExample2.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class FxHtmlEditorExample2 extends Application
{
    public static void main(String[] args)
    {
        Application.launch(args);
    }
 
    @Override
    public void start(Stage stage)
    {
        // Create the HTMLEditor
        HTMLEditor htmlEditor = new HTMLEditor();
        // Set the Height of the HTMLEditor
        htmlEditor.setPrefHeight(300);
        // Set the Width of the HTMLEditor
        htmlEditor.setPrefWidth(600);
 
        // Create the Scene
        Scene scene = new Scene(htmlEditor);
        // Add the Scene to the Stage
        stage.setScene(scene);
        // Add the Stylesheet to the Scene
        scene.getStylesheets().add(getClass().getResource("htmleditor.css").toExternalForm());
        // Set the Title of the Stage
        stage.setTitle("A HTMLEditor Example with a Stylesheet");
        // Display the Stage
        stage.show();
    }
}

2.2 The Stylesheet

htmleditor.css

/* Set the background colors for all buttons and toggle buttons */
.html-editor 
{
    -fx-font: 12 cambria;
    -fx-border-color: blue; 
    -fx-border-style: solid;
    -fx-border-width: 2;    
}
 
.html-editor .button, .html-editor .toggle-button
{
    -fx-background-color: lightblue;
}
 
.html-editor-background 
{
    -fx-color-label-visible: true;
}
 
.html-editor-foreground 
{
    -fx-color-label-visible: true;
}

The default CSS style-class name for an HTMLEditor is html-editor. The HTMLEditor uses styles of a Control such as padding, borders, and background color.

You can style each button in the toolbar separately. The following are the list of style-class names for the toolbar buttons. The names are self-explanatory, for example, html-editor-align-right and html-editor-hr are the style-class names for the toolbar buttons used to right align text and draw a horizontal ruler, respectively.

html-editor-cut
html-editor-copy
html-editor-paste
html-editor-align-left
html-editor-align-center
html-editor-align-right
html-editor-align-justify
html-editor-outdent
html-editor-indent
html-editor-bullets
html-editor-numbers
html-editor-bold
html-editor-italic
html-editor-underline
html-editor-strike
html-editor-hr

Use the button and toggle-button style-class names if you want to apply styles to all toolbar buttons and toggle buttons:

.html-editor .button, .html-editor .toggle-button
{
    -fx-background-color: lightblue;
}

The HTMLEditor shows two ColorPickers for users to select the background and foreground colors.

Their style-class names are html-editor-background and html-editor-foreground. The following code shows the selected color labels in the ColorPickers:

.html-editor-background 
{
    -fx-color-label-visible: true;
}
 
.html-editor-foreground 
{
    -fx-color-label-visible: true;
}

2.3 The GUI

The following image shows the effect of using a Stylesheet in an HTMLEditor:

A JavaFX HTML Editor Example with a StyleSheet

3. Setting an Initial Text to the HTML Editor

3.1 The Code

FxHtmlEditorExample3.java

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class FxHtmlEditorExample3 extends Application
{
    public static void main(String[] args)
    {
        Application.launch(args);
    }
 
    @Override
    public void start(Stage stage)
    {
        // Create the HTMLEditor
        HTMLEditor htmlEditor = new HTMLEditor();
        // Set the Height of the HTMLEditor
        htmlEditor.setPrefHeight(300);
        // Set the Width of the HTMLEditor
        htmlEditor.setPrefWidth(600);
 
        // Set the Initial Text
        String INITIAL_TEXT =
            "An HTMLEditor displays formatting toolbars with it. "
            + "Using the toolbars, you can: </br></br>"
            + "<ul><li>Copy, cut, and paste text using the system clipboard</li>"
            + "<li>Apply text alignment</li>"
            + "<li>Indent text</li>"
            + "<li>Apply bulleted list and numbered list styles</li>"
            + "<li>Set foreground and background colors</li>"
            + "<li>Apply paragraph and heading styles with font family and font size</li>"
            + "<li>Apply formatting styles such as bold, italic, underline, and strikethrough</li>"
            + "<li>Add horizontal rulers</li></ul>";
 
        htmlEditor.setHtmlText(INITIAL_TEXT);
 
        // Create the Scene
        Scene scene = new Scene(htmlEditor);
        // Add the Scene to the Stage
        stage.setScene(scene);
        // Add the Stylesheet to the Scene
        scene.getStylesheets().add(getClass().getResource("htmleditor.css").toExternalForm());
        // Set the Title of the Stage
        stage.setTitle("A HTMLEditor Example with an Initial Text");
        // Display the Stage
        stage.show();
    }
}

The HTMLEditor class has a very simple API that consists of only three methods:

getHtmlText()
setHtmlText(String htmlText)
print(PrinterJob job)

The getHTMLText() method returns the HTML content as a string. The setHTMLText() method sets the content of the control to the specified HTML string. The print() method prints the content of the control.

Want to master JavaFX ?

Subscribe to our newsletter and download the JavaFX Programming Cookbook right now!

In order to get you prepared for your JavaFX development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

Download NOW!

The following code snippet shows the usage of the setHTMLText() method:

// Set the Initial Text
String INITIAL_TEXT =
    "An HTMLEditor displays formatting toolbars with it. "
    + "Using the toolbars, you can: </br></br>"
    + "<ul><li>Copy, cut, and paste text using the system clipboard</li>"
    + "<li>Apply text alignment</li>"
    + "<li>Indent text</li>"
    + "<li>Apply bulleted list and numbered list styles</li>"
    + "<li>Set foreground and background colors</li>"
    + "<li>Apply paragraph and heading styles with font family and font size</li>"
    + "<li>Apply formatting styles such as bold, italic, underline, and strikethrough</li>"
    + "<li>Add horizontal rulers</li></ul>";
 
htmlEditor.setHtmlText(INITIAL_TEXT);

3.2 The GUI

The following GUI shows an HTMLEditor with a given content:

A JavaFX HTML Editor Example wit an Initial Text

4. Using the HTML Editor

4.1 The Code

FxHtmlEditorExample4.java

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.HBox;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
 
public class FxHtmlEditorExample4 extends Application
{
    public static void main(String[] args)
    {
        Application.launch(args);
    }
 
    @Override
    public void start(Stage stage)
    {
        // Create the HTMLEditor
        final HTMLEditor htmlEditor = new HTMLEditor();
        // Set the Height of the HTMLEditor
        htmlEditor.setPrefHeight(300);
        // Set the Width of the HTMLEditor
        htmlEditor.setPrefWidth(600);
        // Set the Initial Text
        htmlEditor.setHtmlText("");
 
        // Create the TextArea
        final TextArea textArea = new TextArea();
        // Set the Size of the TextArea
        textArea.setPrefSize(600, 300);
        // Set the Style of the TextArea
        textArea.setStyle("-fx-font-size:10pt; -fx-font-family: \"Courier New\";");
 
        // Create the Buttons
        Button htmlToText = new Button("Convert HTML to Text");
        Button textToHtml = new Button("Convert Text to HTML");
 
        // Define the Actions for the Buttons
        htmlToText.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override public void handle(ActionEvent arg0)
            {
                htmlEditor.setHtmlText(textArea.getText());
            }
        });
 
        textToHtml.setOnAction(new EventHandler<ActionEvent>()
        {
            @Override public void handle(ActionEvent arg0)
            {
                textArea.setText(htmlEditor.getHtmlText());
            }
        });
 
        // Create the HBox for the Buttons
        HBox buttons = new HBox(htmlToText, textToHtml);
        // Set Spacing to the HBox
        buttons.setSpacing(10);
 
        // Create the VBox
        VBox root = new VBox();
        // Set the Padding of the VBox
        root.setPadding(new Insets(8, 8, 8, 8));
        // Set Spacing to 5 px
        root.setSpacing(5);
        // Set the Position of the VBox
        root.setAlignment(Pos.BOTTOM_LEFT);
        // Set the Style-properties of the VBox
        root.setStyle("-fx-padding: 10;" +
            "-fx-border-style: solid inside;" +
            "-fx-border-width: 2;" +
            "-fx-border-insets: 5;" +
            "-fx-border-radius: 5;" +
            "-fx-border-color: blue;");
 
        // Add the Children to The VBox
        root.getChildren().addAll(htmlEditor, buttons, textArea);
 
        // Create the Scene
        Scene scene = new Scene(root);
        // Add the Stylesheet to the Scene
        scene.getStylesheets().add(getClass().getResource("htmleditor.css").toExternalForm());
        // Add the Scene to the Stage
        stage.setScene(scene);
        // Set the Width and Heigth of the Stage
        stage.setWidth(500);
        stage.setHeight(500);
        // Set the Title of the Stage
        stage.setTitle("A HTMLEditor Converter Example");
        // Display the Stage
        stage.show();
    }
}

The above program shows how to use the getHtmlText() and the setHtmlText(String htmlText) method of an HTMLEditor.

It displays an HTMLEditor, a TextArea, and two buttons. You can use the buttons to convert text in the HTMLEditor to HTML code and vice versa.

The following code snippet shows the EventHandler, which converts the Plain Text to HTML code:

// Define the Actions for the Buttons
htmlToText.setOnAction(new EventHandler<ActionEvent>()
{
    @Override public void handle(ActionEvent arg0)
    {
        htmlEditor.setHtmlText(textArea.getText());
    }
});

The following code snippet shows the EventHandler, which converts the HTML code to Plain Text:

textToHtml.setOnAction(new EventHandler<ActionEvent>()
{
    @Override public void handle(ActionEvent arg0)
    {
        textArea.setText(htmlEditor.getHtmlText());
    }
});

4.2 The GUI

The following image shows the result of the conversation from Text to HTML:

Converting Text to HTML in a JavaFX HTML Editor

The following image shows the result of the conversation from HTML to Text:

Converting HTML to Text in a JavaFX HTML Editor

5. Download Java Source Code

This was an example of javafx.scene.web.HTMLEditor

Download
You can download the full source code of this example here: JavaFxHTMLEditorExample.zip

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

1. JPA Mini Book

2. JVM Troubleshooting Guide

3. JUnit Tutorial for Unit Testing

4. Java Annotations Tutorial

5. Java Interview Questions

6. Spring Interview Questions

7. Android UI Design

and many more ....

I agree to the Terms and Privacy Policy

JavaFX HTML Editor Example

Table Of Contents

1. Creating an HTML Editor

1.1 The Code

1.2 The GUI

2. Styling HTML Editor with CSS

2.1 The Code

2.2 The Stylesheet

2.3 The GUI

3. Setting an Initial Text to the HTML Editor

3.1 The Code

Thank you!

3.2 The GUI

4. Using the HTML Editor

4.1 The Code

4.2 The GUI

5. Download Java Source Code

Thank you!

Andreas Pomarolli

Thank you!

Table Of Contents

1. Creating an HTML Editor

1.1 The Code

1.2 The GUI

2. Styling HTML Editor with CSS

2.1 The Code

2.2 The Stylesheet

2.3 The GUI

3. Setting an Initial Text to the HTML Editor

3.1 The Code

Thank you!

3.2 The GUI

4. Using the HTML Editor

4.1 The Code

4.2 The GUI

5. Download Java Source Code

Thank you!

Related Articles

Thank you!