JavaFX 将自定义按钮添加到 HTMLEditor 工具栏的位置

Question

我有一个 HTMLEditor，我想在其中向工具栏添加一个按钮，将表格插入编辑器。我可以插入按钮，但无法将其置于正确的位置。我希望它出现在列表按钮的右侧，如下所示：

但是我只能把它添加到工具栏的前面

我尝试在工具栏中的某个位置插入失败。例如，当我尝试

bar.getItems().add(6, tableButton);

这会引发错误，当我打印时

bar.getItems().size();

我得到 0，这意味着我做错了，因为显然有一些工具栏按钮。

如何将表格按钮插入到正确位置，即当前有序列表按钮右侧的分隔线左侧。

这是我的代码，在 Scene Builder 中设置为 HTMLEditor 的控制器

package editorgroup;

import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.fxml.FXML;
import javafx.scene.Node;
import javafx.scene.control.Button;
import javafx.scene.control.ToolBar;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.web.HTMLEditor;
import main.Main;


public class EditorGroupController {

    @FXML
    private HTMLEditor htmlEditor;
    
    // Reference to the main application.
    private Main mainApp;
    public void setMainApp(Main mainApp) {
        this.mainApp = mainApp;
    }


    public EditorGroupController() {
    }

    // This method is automatically called after the fxml file has been loaded.
    @FXML
    private void initialize() {
        
        // add a custom button to the top toolbar.
        Node node = htmlEditor.lookup(".top-toolbar");
        if (node instanceof ToolBar) {
            ToolBar bar = (ToolBar) node;

            ClassLoader classLoader = getClass().getClassLoader();
            String absolutePath = "file://" + classLoader.getResource("table_icon.png").getPath();
            ImageView graphic = new ImageView(new Image(absolutePath, 20, 20, true, true));
            Button tableButton = new Button("", graphic);
            bar.getItems().add(tableButton);
            
            tableButton.setOnAction(new EventHandler<ActionEvent>() {
                public void handle(ActionEvent arg0) {
                    htmlEditor.setHtmlText("<table><tbody><tr><td>HEY!</td></tr></tbody>");
                }
            });
        }
    }   
}

Answer 1

ToolBar 是在 HTMLEditorSkin 的 HTMLEditorSkin 中构造的，但在构造时不会填充。
它在第一次调用 layoutChildren 时填充。
因此，您需要在至少一个布局通道后修改工具栏：

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.Button;
import javafx.scene.control.ToolBar;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.stage.Stage;

public class HtmlEditorExample extends Application {

    @Override
    public void start(Stage primaryStage) {

        HTMLEditor htmlEditor = new HTMLEditor();
        ToolBar bar = null;
        Node node = htmlEditor.lookup(".top-toolbar");
        if (node instanceof ToolBar) {
            bar = (ToolBar) node;
            System.out.println( "Size before layout pass: "+bar.getItems().size());
        }

        VBox vBox = new VBox(htmlEditor);
        primaryStage.setScene(new Scene(vBox));
        primaryStage.show(); //invokes layout pass

        if (bar != null) {
            System.out.println( "Size after layout pass: "+bar.getItems().size());
            bar.getItems().add(6, new Button("My Button"));
        }
    }

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