javafx-2 - javafx html 编辑器

Question

实际上我正在寻找与此线程非常相似的东西：

如何隐藏 HTMLEditor 的控件？

所以基本上我尝试向 javafx html 编辑器添加一个自定义按钮，但不同之处在于它是通过 FXML 实现的。

所以我的问题是：

当通过 FXML 实现时，是否有“解决方法”将自定义按钮添加到 html 编辑器？

Answer 1

示例解决方案是：

htmlEditor.setVisible(false);
    Platform.runLater(new Runnable() {

        @Override
        public void run() {
            Node[] nodes = htmlEditor.lookupAll(".tool-bar").toArray(new Node[0]);
            for (Node node : nodes) {
                node.setVisible(false);
                node.setManaged(false);
            }
            htmlEditor.setVisible(true);
        }

    });

Answer 2

我已经修改了 javaFX9 的 @jewelsea 答案。

我还添加了一些自定义来移动工具栏。主要思想是通过css选择器获取所有组件，然后修改或隐藏它们。阅读 HTMLEditorSkin 类以获取 CSS 类名称，例如对齐按钮的“.html-editor-align-center”。

import java.util.Iterator;
import java.util.List;
import java.util.Set;
import java.util.concurrent.atomic.AtomicBoolean;
import java.util.regex.Pattern;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.control.MenuButton;
import javafx.scene.control.MenuItem;
import javafx.scene.control.RadioMenuItem;
import javafx.scene.control.ToolBar;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.GridPane;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;

public class HTMLEditorCustomizationSample2 extends Application {
    // limits the fonts a user can select from in the html editor.
    private static final ObservableList<String> limitedFonts = FXCollections.observableArrayList("Arial",
            "Times New Roman", "Courier New", "Comic Sans MS");
    private HTMLEditor htmlEditor;

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

    @SuppressWarnings("unchecked")
    @Override
    public void start(Stage stage) {
        htmlEditor = new HTMLEditor();
        stage.setScene(new Scene(htmlEditor));
        stage.show();

        customizeEditor(htmlEditor);

    }

    private void customizeEditor(HTMLEditor htmlEditor) {
        // hide controls we don't need.
        Node seperator = htmlEditor.lookup(".separator");
        seperator.setVisible(false);
        seperator.setManaged(false);
        hideByClass(htmlEditor, ".separator");
        hideByClass(htmlEditor, ".html-editor-cut", ".html-editor-copy", ".html-editor-paste", ".html-editor-strike",
                ".html-editor-hr");
        hideByClass(htmlEditor, ".html-editor-align-left"
                , ".html-editor-align-center"
                , ".html-editor-align-right"
                , ".html-editor-align-justify", ".html-editor-outdent"
                , ".html-editor-indent", ".html-editor-bullets"
                , ".html-editor-numbers");
        // Move the toolbars
        Node top= htmlEditor.lookup(".top-toolbar");
        GridPane.setConstraints(top,1,0,1,1);
        Node bottom= htmlEditor.lookup(".bottom-toolbar");
        GridPane.setConstraints(bottom,0,0,1,1);
        Node web= htmlEditor.lookup("WebView");
        GridPane.setConstraints(web,0,1,2,1); 

        // modify font selections.
        int i = 0;
        Set<Node> fonts = htmlEditor.lookupAll(".font-menu-button");
        Iterator<Node> fontsIterator = fonts.iterator();
        fontsIterator.next();
        ComboBox<String> formatComboBox = (ComboBox<String>) fontsIterator.next();

        formatComboBox.itemsProperty().addListener((obs, old, value) -> {
            if (value.size() != limitedFonts.size()) {// should loop on array for equality
                Platform.runLater(() -> {
                    value.clear();
                    // stop.set(true);
                    value.addAll(limitedFonts);
                    formatComboBox.setValue(limitedFonts.get(0));
                });

            }
        });

        // add a custom button to the top toolbar.
        Node node = htmlEditor.lookup(".top-toolbar");
        if (node instanceof ToolBar) {
            ToolBar bar = (ToolBar) node;
            ImageView graphic = new ImageView(
                    new Image("http://bluebuddies.com/gallery/title/jpg/Smurf_Fun_100x100.jpg", 16  , 16, true, true));
            graphic.setEffect(new DropShadow());
            Button smurfButton = new Button("", graphic);
            bar.getItems().add(smurfButton);
            smurfButton.setOnAction(new EventHandler<ActionEvent>() {
                @Override
                public void handle(ActionEvent arg0) {
                    htmlEditor.setHtmlText("<font face='Comic Sans MS' color='blue'>Smurfs are having fun :-)</font>");
                }
            });
        }
    }

    private void hideByClass(HTMLEditor htmlEditor, String... selectors) {
        for (String selector : selectors) {
            Set<Node> nodes = htmlEditor.lookupAll(selector);
            for (Node node : nodes) {
                node.setVisible(false);
                node.setManaged(false);
            }
        }
    }



    @Override
    public void stop() throws Exception {

        super.stop();
        System.out.println(htmlEditor.getHtmlText());
    }

}

Answer 3

Here is some sample code which customizes the HTMLEditor and adds a custom button to it. The sample code does not use fxml but really it's very similar if fxml is used. You could define the HTMLEditor in fxml and inject it into your Controller using the standard @FXML annotation. Once you have a reference to the editor, customize it in Java code using an appropriate variation of the sample code. For the added button, just create it in Java rather than fxml and it will be simpler.