JavaFX HTMLEditor Tutorial with Examples

JavaFX HTMLEditor
HTMLEditor Example
HTMLEditor and WebView
HTMLEditor and Styles

1. JavaFX HTMLEditor

The JavaFX HTMLEditor control is a full functional rich text editor. Its implementation is based on the document editing feature of HTML5 and includes the following editing functions:

Text formatting including bold, italic, underline, and strike though styles
Paragraph settings such as format, font family, and font size
Foreground and background colors
Text indent
Bulleted and numbered lists
Text alignment
Adding a horizontal rule
Copying and pasting text fragments

// Create HTMLEditor
HTMLEditor htmlEditor = new HTMLEditor();
htmlEditor.setPrefHeight(245);

String INITIAL_TEXT = "<h2>Apollo 11</h2>" //
        + "Apollo 11 was the spaceflight that landed the first humans,"//
        + " Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a>"
        + " and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>,"//
        + " on the Moon on July 20, 1969, at 20:18 UTC."//
        + " <b>Armstrong</b> became the first to step onto"//
        + " the lunar surface 6 hours later on July 21 at 02:56 UTC.";

// Set HTML
htmlEditor.setHtmlText(INITIAL_TEXT);

// Get HTML
String html = htmlEditor.getHtmlText();

2. HTMLEditor Example

HTMLEditorDemo.java

package org.o7planning.javafx.htmleditor;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.TextArea;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;

public class HTMLEditorDemo extends Application {
    @Override
    public void start(Stage stage) {
        HTMLEditor htmlEditor = new HTMLEditor();
        htmlEditor.setPrefHeight(245);
      
        String INITIAL_TEXT = "<h2>Apollo 11</h2>" //
                + "Apollo 11 was the spaceflight that landed the first humans,"//
                + " Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a>"
                + " and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>,"//
                + " on the Moon on July 20, 1969, at 20:18 UTC."//
                + " <b>Armstrong</b> became the first to step onto"//
                + " the lunar surface 6 hours later on July 21 at 02:56 UTC.";

        htmlEditor.setHtmlText(INITIAL_TEXT);
        Button showHTMLButton = new Button("Produce HTML Code");
        TextArea textArea = new TextArea();
        textArea.setWrapText(true);

        //
        showHTMLButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                textArea.setText(htmlEditor.getHtmlText());
            }
        });
        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(5);
        root.getChildren().addAll(htmlEditor, showHTMLButton, textArea);
        Scene scene = new Scene(root, 600, 450);
        stage.setTitle("JavaFX HTMLEditor (o7planning.org)");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

3. HTMLEditor and WebView

HTMLEditor is an HTML editor while WebView is a mini-browser. You can modify HTML content on HTMLEditor and display it on WebView. Let's see illustrative example below:

See more WebView:
JavaFX WebView, WebEngine

HTMLEditorWebViewDemo.java

package org.o7planning.javafx.htmleditor;

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
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 HTMLEditorWebViewDemo extends Application {

    @Override
    public void start(Stage stage) {
        // HTML Editor.
        HTMLEditor htmlEditor = new HTMLEditor();
        htmlEditor.setPrefHeight(245);
        htmlEditor.setMinHeight(220);
        String INITIAL_TEXT = "<h2>Apollo 11</h2>" //
                + "Apollo 11 was the spaceflight that landed the first humans,"//
                + " Americans <a href='http://en.wikipedia.org/wiki/Neil_Armstrong'>Neil Armstrong</a>"
                + " and <a href='http://en.wikipedia.org/wiki/Buzz_Aldrin'>Buzz Aldrin</a>,"//
                + " on the Moon on July 20, 1969, at 20:18 UTC."//
                + " <b>Armstrong</b> became the first to step onto"//
                + " the lunar surface 6 hours later on July 21 at 02:56 UTC.";

        htmlEditor.setHtmlText(INITIAL_TEXT);
        Button showHTMLButton = new Button("Show in WebView");

        // WebView
        WebView webView = new WebView();
        WebEngine webEngine = webView.getEngine();
        //
        showHTMLButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent event) {
                webEngine.loadContent(htmlEditor.getHtmlText(), "text/html");
            }
        });
        VBox root = new VBox();
        root.setPadding(new Insets(5));
        root.setSpacing(5);
        root.getChildren().addAll(htmlEditor, showHTMLButton, webView);
        Scene scene = new Scene(root, 600, 450);
        stage.setTitle("JavaFX HTMLEditor (o7planning.org)");
        stage.setScene(scene);
        stage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
}

4. HTMLEditor and Styles

You can apply Css style for HTMLEditor:

htmlEditor.setStyle(
        "-fx-font: 14 Arial;"
        + "-fx-border-color: brown; "
        + "-fx-border-style: dotted;"
        + "-fx-border-width: 2;"