How to hide the controls of HTMLEditor?

Question

is it possible to hide the controls of a HTMLEditor above the actual text? (Alignment, Copy&Paste icons, stylings etc.)

Thanks for any help

Answer 1

public static void hideHTMLEditorToolbars(final HTMLEditor editor)
{
    editor.setVisible(false);
    Platform.runLater(new Runnable()
    {
        @Override
        public void run()
        {
            Node[] nodes = editor.lookupAll(".tool-bar").toArray(new Node[0]);
            for(Node node : nodes)
            {
                node.setVisible(false);
                node.setManaged(false);
            }
            editor.setVisible(true);
        }
    });
}

Answer 2

If you use unsupported methods, you can customize the toolbars pretty easily.

As Uluk states in his answer, the methods below aren't officially supported.

import java.util.regex.Pattern;
import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.image.ImageView;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;

public class HTMLEditorSample extends Application {
  public static void main(String[] args) { launch(args); }
  @Override public void start(Stage stage) {
    final HTMLEditor htmlEditor = new HTMLEditor();
    stage.setScene(new Scene(htmlEditor));
    stage.show();

    hideImageNodesMatching(htmlEditor, Pattern.compile(".*(Cut|Copy|Paste).*"), 0);
    Node seperator = htmlEditor.lookup(".separator");
    seperator.setVisible(false); seperator.setManaged(false);
  }

  public void hideImageNodesMatching(Node node, Pattern imageNamePattern, int depth) {
    if (node instanceof ImageView) {
      ImageView imageView = (ImageView) node;
      String url = imageView.getImage().impl_getUrl();
      if (url != null && imageNamePattern.matcher(url).matches()) {
        Node button = imageView.getParent().getParent();
        button.setVisible(false); button.setManaged(false);
      }
    }
    if (node instanceof Parent) 
      for (Node child : ((Parent) node).getChildrenUnmodifiable()) 
        hideImageNodesMatching(child, imageNamePattern, depth + 1);
  }
}

Answer 3

It seems you cannot according to this official tutorial.

The formatting toolbars are provided in the implementation of the component. You cannot toggle their visibility. However, you still can customize the appearance of the editor by applying CSS style ...

Answer 4

I've made some functions to modify the HTML-Editor (to get a minimalistic version of it), maybe someone else might want to use it too.

The Code:

import javafx.application.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import com.sun.javafx.scene.web.skin.PopupButton;

public class HTMLEditorModifyer extends Application {

      public static void main(String[] args) { launch(args); }
      @Override public void start(Stage stage) {
        final HTMLEditor htmlEditor = new HTMLEditor();
        stage.setScene(new Scene(htmlEditor));

        stage.setWidth(300);
        stage.setHeight(200);
        stage.show();

        addCustomToolBarTo(htmlEditor);

        printChildren(htmlEditor, 20);

        moveFromTo(htmlEditor, "PopupButton", 0, "ToolBar", 2);
        moveFromTo(htmlEditor, "PopupButton", 1, "ToolBar", 2);

        moveFromTo(htmlEditor, "Separator", 4, "ToolBar", 2);
        moveFromTo(htmlEditor, "ComboBox", 2, "ToolBar", 2);
        moveFromTo(htmlEditor, "Separator", 5, "ToolBar", 2);

        moveFromTo(htmlEditor, "ToggleButton", 6, "ToolBar", 2);
        moveFromTo(htmlEditor, "ToggleButton", 7, "ToolBar", 2);
        moveFromTo(htmlEditor, "ToggleButton", 8, "ToolBar", 2);

        removeFrom(htmlEditor, "ToolBar", 1);
        removeFrom(htmlEditor, "ToolBar", 0);

        //printChildren(htmlEditor, 20);

      }

      public void moveFromTo(HTMLEditor he, String t, int c, String t2, int c2)
      {
          Node nCb = new Button(); //just has to be sth.  

          //Copy From:
          int i = 0;
          switch(t)
          {
              case "PopupButton":
                  for (Node candidate: (he.lookupAll("PopupButton"))) 
                  {
                    if (candidate instanceof PopupButton)
                    {
                        PopupButton cb = (PopupButton) candidate;
                        if (i == c)
                        {
                            nCb = cb;
                            break;
                        }
                    }
                    i++;
                  }
                  break;  
              case "Separator":
                  for (Node candidate: (he.lookupAll("Separator"))) 
                  {
                    if (candidate instanceof Separator)
                    {
                        Separator cb = (Separator) candidate;
                        if (i == c)
                        {
                            nCb = cb;
                            break;
                        }
                    }
                    i++;
                  }
                  break;
              case "ComboBox":
                  for (Node candidate: (he.lookupAll("ComboBox"))) 
                  {
                    if (candidate instanceof ComboBox)
                    {
                        ComboBox cb = (ComboBox) candidate;
                        if (i == c)
                        {
                            nCb = cb;
                            break;
                        }
                    }
                    i++;
                  }
                  break;    
              case "ToggleButton":
                  for (Node candidate: (he.lookupAll("ToggleButton"))) 
                  {
                    if (candidate instanceof ToggleButton)
                    {
                        ToggleButton cb = (ToggleButton) candidate;
                        if (i == c)
                        {
                            nCb = cb;
                            break;
                        }
                    }
                    i++;
                  }
                  break;    
          }
          //Copy To:
          i = 0;
          switch(t2)
          {
              case "ToolBar":
                  for (Node candidate: (he.lookupAll("ToolBar"))) 
                  {
                    if (candidate instanceof ToolBar)
                    {
                        ToolBar cb2 = (ToolBar) candidate;
                        if (i == c2)
                        {
                            cb2.getItems().add(nCb);
                            break;
                        }
                    }
                    i++;
                  }
                  break;    
          }
      }

      public void removeFrom(HTMLEditor he, String t, int c)
      {
          int i = 0;

          switch(t)
          {
          case "ToolBar":
              for (Node candidate: (he.lookupAll("ToolBar"))) 
              {
                if (candidate instanceof ToolBar)
                {
                    ToolBar cb = (ToolBar) candidate;
                    if (i == c)
                    {
                        Node nCb = cb;
                        ((Pane) nCb.getParent()).getChildren().remove(nCb);
                        break;
                    }
                }
                i++;
              }
              break;
          case "PopupButton":
              for (Node candidate: (he.lookupAll("PopupButton"))) 
              {
                    if (i == c)
                    {
                        Node nCb = candidate;
                        nCb.setVisible(false); nCb.setManaged(false);
                        break;
                    }
                    i++;
              }
              break;
          case "ToggleButton":
              for (Node candidate: (he.lookupAll("ToggleButton"))) 
              {
                if (candidate instanceof ToggleButton)
                {
                    ToggleButton cb = (ToggleButton) candidate;
                    if (i == c)
                    {
                        Node nCb = cb;
                        nCb.setVisible(false); nCb.setManaged(false);
                        break;
                    }
                }
                i++;
              }
              break;
          case "Separator":
              for (Node candidate: (he.lookupAll("Separator"))) 
              {
                if (candidate instanceof Separator)
                {
                    Separator cb = (Separator) candidate;
                    if (i == c)
                    {
                        Node nCb = cb;
                        nCb.setVisible(false); nCb.setManaged(false);
                        break;
                    }
                }
                i++;
              }
              break;
          case "Button":
              for (Node candidate: (he.lookupAll("Button"))) 
              {
                if (candidate instanceof Button)
                {
                    Button cb = (Button) candidate;
                    if (i == c)
                    {
                        Node nCb = cb;
                        nCb.setVisible(false); nCb.setManaged(false);
                        break;
                    }
                }
                i++;
              }
              break;
          case "ComboBox":
              for (Node candidate: (he.lookupAll("ComboBox"))) 
              {
                if (candidate instanceof ComboBox)
                {
                    ComboBox cb = (ComboBox) candidate;
                    if (i == c)
                    {
                        Node nCb = cb;
                        nCb.setVisible(false); nCb.setManaged(false);
                        break;
                    }
                }
                i++;
              }
              break;
          }   
      }

      public void printChildren(HTMLEditor he, int MAXDEPTH)
      {
          System.out.println("Print Children ==========>>>>");
          String[] hieraArray = new String[MAXDEPTH]; 
          int maxDepth = 0;
          int lastDepth = 0;
          Node parent;

            /* List all elements of the HTMLeditor */
            for (Node element: (he.lookupAll("*")))
            {
                parent = element.getParent();
                if (maxDepth == 0) 
                {
                    hieraArray[0] = element.getClass().getSimpleName().toString();
                    System.out.print(hieraArray[0]);
                    System.out.println("");
                    maxDepth = 1;                   
                }
                else 
                {
                    int i = 0, i2 = 0;
                    boolean found = false;
                    for(i=maxDepth; i>=0; i--)
                    {
                        if (hieraArray[i] == null || parent.getClass().getSimpleName() == null) continue;
                        if (hieraArray[i].equals(parent.getClass().getSimpleName()))
                        {
                            for (i2 = 0; i2 <= i; i2++)
                            {
                                System.out.print("|");
                            }   
                            if ((Math.abs(lastDepth-i2)) > 2) System.out.print("->" + element.getClass().getSimpleName() + " {p: " + parent.getClass().getSimpleName() + "}");
                            else System.out.print("->" + element.getClass().getSimpleName());
                            //if (element.getClass().getSimpleName().equals("PopupButton"))  System.out.print(" ??: " + element + " ::: " + element.getClass());
                            lastDepth = i2;

                            hieraArray[(i+1)] = element.getClass().getSimpleName();
                            if (maxDepth < (i+1)) maxDepth = (i+1);
                            found = true;
                            System.out.println("");
                            break;
                        }
                    }
                    if (found == false) 
                    {
                        hieraArray[(i+1)] = parent.getClass().getSimpleName();
                        if (maxDepth < (i+1)) maxDepth = (i+1);
                    }
                    if ((maxDepth+1) >= MAXDEPTH) 
                    {
                        System.out.println("MAXDEPTH reached! increase ArraySize!");
                        return;
                    }
                }
            }


      }

      public ToolBar addCustomToolBarTo(HTMLEditor he)
      {
          /* Thers one GridPane to the HTMLEditor where we add the ToolBar */
          ToolBar customTB = new ToolBar();
          for (Node candidate: (he.lookupAll("GridPane"))) 
          {
            if (candidate instanceof GridPane)
            {
                ((GridPane) candidate).getChildren().add(customTB);
                break;
            }   
          }
          return customTB;
      }       
}

Answer 5

If someone really wants to use an unsupported way to hide the Toolbars then there is an even easier way to achieve this (I haven't tested if this causes any problems in the HTMLEditor control so use this at your own risk).

package htmleditorsample;

import javafx.application.Application;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;

public class HTMLEditorSample extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        final HTMLEditor htmlEditor = new HTMLEditor();
        primaryStage.setScene(new Scene(htmlEditor));
        primaryStage.show();

        for (Node toolBar = htmlEditor.lookup(".tool-bar"); toolBar != null; toolBar = htmlEditor.lookup(".tool-bar")) {
            ((Pane) toolBar.getParent()).getChildren().remove(toolBar);
        }
    }
}