JavaFX HTMLEditor Tutorial

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:
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;"