Creating an HTMLEditor

The HTMLEditor control enables users to edit rich text, with its underlying data represented in HTML. As you experienced in Step 32 of the exercise, the HTMLEditor shown in Figure 6-12 contains several tools for editing text, as well as the editing area itself.

To create the HTMLEditor instance, our StarterApp program defines a method that we’ve arbitrarily named createHtmlEditorDemoNode(), shown in Listing 6-13. This method leverages the BorderPane, HTMLEditor, and Button classes, returning a BorderPane instance that contains the HTMLEditor and a button labeled View HTML. Listing 6-13. The createHtmlEditorDemoNode() Method

Node createHtmlEditorDemoNode() {
      final BorderPane htmlEditorDemo;
      final HTMLEditor htmlEditor = new HTMLEditor();
      htmlEditor.setHtmlText("<p>Replace this text</p>");
      Button viewHtmlButton = new Button("View HTML");
      viewHtmlButton.setOnAction(e -> {
          Popup alertPopup = createAlertPopup(htmlEditor.getHtmlText());
          alertPopup.show(stage,
                  (stage.getWidth() - alertPopup.getWidth()) / 2 + stage.getX(),
                  (stage.getHeight() - alertPopup.getHeight()) / 2 + stage.getY());
      });
      htmlEditorDemo = new BorderPane();
      htmlEditorDemo.setCenter(htmlEditor);
      htmlEditorDemo.setBottom(viewHtmlButton);

      BorderPane.setAlignment(viewHtmlButton, Pos.CENTER);
      BorderPane.setMargin(viewHtmlButton, new Insets(10, 0, 10, 0));
      return htmlEditorDemo;
}