如何使用代码更改颜色 HTMLeditor？答案

【问题标题】：How do i change color HTMLeditor with code?如何使用代码更改颜色 HTMLeditor？
【发布时间】：2019-01-06 23:26:17
【问题描述】：

我制作了一个扩展 HTMLEditor 的自定义 htmleditor。我删除了一些按钮并添加了一些。

现在我想添加几个按钮，将输入的文本更改为 1 种特定颜色。但是我找不到在按钮的 setOnAction 中更改文本颜色的方法。我尝试了几种方法。

1 : 我在光标位置插入的 html

2 : 设置 htmleditor 的颜色选择器的颜色

(jsCodeInsertHtml 字符串允许 html 在光标处)

    String jsCodeInsertHtml = "function insertHtmlAtCursor(html) {\n" +
            "    var range, node;\n" +
            "    if (window.getSelection && window.getSelection().getRangeAt) {\n" +
            "        range = window.getSelection().getRangeAt(0);\n" +
            "        node = range.createContextualFragment(html);\n" +
            "        range.insertNode(node);\n" +
            "    } else if (document.selection && document.selection.createRange) {\n" +
            "        document.selection.createRange().pasteHTML(html);\n" +
            "    }\n" +
            "}insertHtmlAtCursor('####html####')";



          // add a custom button to the top toolbar.
            Node nodetop = editor.lookup(".top-toolbar");
            if (nodetop instanceof ToolBar) {
                ToolBar topbar = (ToolBar) nodetop;



                //var1 color
                ImageView graphic = new ImageView(var1pic);
                Button colorVar1Button = new Button("", graphic);
                colorVar1Button.setFocusTraversable(false);
                colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
                    @Override
                    public void handle(ActionEvent arg0) {
                        WebView webView=(WebView)editor.lookup("WebView");
                        WebEngine engine= webView.getEngine();

                        //try 1
                        engine.executeScript(jsCodeInsertHtml.replace("####html####","<p><span style=\"color: rgb(200, 200, 200); caret-color: rgb(200, 200, 200);\">"));
                         //the HTML is inserted , but no colorchange. i tryed some htmlvariants aswel


                        //try 2
                        Node color = editor.lookup(".html-editor-foreground");
                        ((ColorPicker)color).setValue(Color.rgb(200,200,200));
                        // i notice the button change in the colorpicker ,
                        // but no change in color happens

                topbar.getItems().addAll(colorVar1Button);

【问题讨论】：

标签： html javafx color-picker html-editor

【解决方案1】：

找到了解决办法。我只需要触发颜色选择器的动作事件即可使其工作

                colorVar1Button.setOnAction(new EventHandler<ActionEvent>() {
                    @Override
                    public void handle(ActionEvent arg0) {
                        Node color = editor.lookup(".html-editor-foreground");

                        ((ColorPicker)color).setValue(Color.HOTPINK);
                        color.fireEvent(new ActionEvent());
                    }
                });

            topbar.getItems().addAll(colorVar1Button);

【讨论】：