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

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 2

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 3

This is a pretty old thread, but most of these answers only sort of work, especially on newer JDKs, so here is the custom HTML editor class that I wrote based on some of the concepts in this thread.

import javafx.application.Platform;
import javafx.scene.Node;
import javafx.scene.control.ToolBar;
import javafx.scene.web.HTMLEditor;

import java.util.ArrayList;
import java.util.HashSet;

public class MinimalHTMLEditor extends HTMLEditor {
    public MinimalHTMLEditor() {
        super();
        customizeHtmlEditor(this);
    }

    public static void customizeHtmlEditor(final HTMLEditor editor) {
        editor.setVisible(false);
        Platform.runLater(() -> {
            ToolBar toolBar1 = (ToolBar) editor.lookup(".top-toolbar");
            ToolBar toolBar2 = (ToolBar) editor.lookup(".bottom-toolbar");

            HashSet<Node> nodesToKeep = new HashSet<>();

            nodesToKeep.add(editor.lookup(".html-editor-numbers"));
            nodesToKeep.add(editor.lookup(".html-editor-bullets"));

            nodesToKeep.add(editor.lookup(".html-editor-foreground"));
            nodesToKeep.add(editor.lookup(".html-editor-background"));

            nodesToKeep.add(editor.lookup(".html-editor-bold"));
            nodesToKeep.add(editor.lookup(".html-editor-italics"));
            nodesToKeep.add(editor.lookup(".html-editor-underline"));
            nodesToKeep.add(editor.lookup(".html-editor-strike"));

            toolBar1.getItems().removeIf(n -> !nodesToKeep.contains(n));
            toolBar2.getItems().removeIf(n -> !nodesToKeep.contains(n));

            ArrayList<Node> toCopy = new ArrayList<>();
            toCopy.addAll(toolBar2.getItems());
            toolBar2.getItems().clear();
            toolBar1.getItems().addAll(toCopy);

            toolBar2.setVisible(false);
            toolBar2.setManaged(false);

            editor.setVisible(true);
        });
    }
}

Answer 4

Try this:

.html-editor .top-toolbar
{
        -fx-max-width: 0px;
	-fx-min-width: 0px;
	-fx-pref-width: 0px;
	-fx-max-height: 0px;
	-fx-min-height: 0px;
	-fx-pref-height: 0px;
        -fx-opacity: 0;
}
.html-editor .bottom-toolbar
{
        -fx-max-width: 0px;
	-fx-min-width: 0px;
	-fx-pref-width: 0px;
	-fx-max-height: 0px;
	-fx-min-height: 0px;
	-fx-pref-height: 0px;
        -fx-opacity: 0;
}