is it possible to hide the controls of a HTMLEditor above the actual text? (Alignment, Copy&Paste icons, stylings etc.)
Thanks for any help
How to hide the controls of HTMLEditor?
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 ...
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);
}
});
}
This one's nice because you can't even tell the toolbars were there at one time. –
Cloddish
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);
}
}
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 ...
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;
}
}
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);
}
}
}
When I tried your code (JavaFX 8), I got this NullPointerException. –
Cloddish
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;
}You should be able to hide buttons from its toolbars, even remove them.
I'd do it this way:
final Map map = new HashMap();
for (Node candidate: (htmlEditor.lookupAll("ToolBar"))) {
List list = ((ToolBar) candidate).getItems();
for (int i = 0; i < list.size(); i++) {
Node b = (Node) list.get(i);
map.put(map.size() + 1, b);
}
}
// So we've fetch all buttons (including separators) and assigned
// each an index number. Now then to hide an item:
((Node) map.get(2)).setVisible(false); // Hides copy button
((Node) map.get(13)).setVisible(false); // Hides bullets button
// Or to just completely remove them:
map.remove(18); // Removes font-menu-button
map.remove(25); // Removes editor-strike button.tool-bar
{
/*-fx-visibility:hidden;
-fx-display:none; */
-fx-opacity: 0;
}
opacity works, but the menu stays active.
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);
});
}
}
Weird !!! I tried your code but it did not remove the three combobox: "Format", "Font" or "Size". One of them ==> nodesToKeep.add(editor.lookup(".format-menu-button")); –
Aguilera
You can remove specific buttons using CSS, for example:
.html-editor-copy {
visibility: hidden;
}
The full list of the CSS button names can be found at: Oracle CSS Reference Guide
© 2022 - 2024 — McMap. All rights reserved.