JavaFX HTMLEditor Tutorial
View more Tutorials:
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();

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