javafx html编辑器

Question

实际上，我正在寻找一些非常类似于这条线的东西：

如何隐藏HTMLEditor控件？

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

，所以我的问题是：

当html-编辑器通过FXML实现时，是否有“工作”来向它添加自定义按钮？

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修改了@珠宝商的答案。

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

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

下面是一些样本代码，它自定义HTMLEditor并向其添加一个自定义按钮。示例代码不使用fxml，但如果使用fxml，则实际上非常类似。您可以在fxml中定义HTMLEditor并使用标准的@FXML注释将其注入到您的Controller中。一旦您有了对编辑器的引用，就可以使用示例代码的适当变体在Java代码中定制它。对于添加的按钮，只需用Java而不是fxml创建它，它就会更简单。