JavaFX HTMLEditor 以编程方式触发字体大小更改

Question

I have an HTML editor where I hide the entire toolbar.我有一个 HTML 编辑器，可以在其中隐藏整个工具栏。 I want to allow users to change the font size using a context menu instead.我希望允许用户使用上下文菜单更改字体大小。 I think the safest way to modify the HTML in the editor is to trigger a change event on the toolbar ComboBox that changes the font size.我认为在编辑器中修改 HTML 的最安全方法是在工具栏 ComboBox 上触发更改字体大小的更改事件。 In this example for simplicity I'm trying to trigger that change with a button click.在此示例中，为简单起见，我尝试通过单击按钮来触发该更改。

In the example below I create a standard HTML Editor, then the button that tries to extract the ComboBox from the editor, set its value to the first option, and fire an action event on it.在下面的示例中，我创建了一个标准的 HTML 编辑器，然后是尝试从编辑器中提取 ComboBox 的按钮，将其值设置为第一个选项，并在其上触发一个操作事件。 So if you have some text selected in the editor and press the button, the font size of the selected text should change.因此，如果您在编辑器中选择了一些文本并按下按钮，则所选文本的字体大小应该会改变。 But it does not.但事实并非如此。

I've succeeded in this approach with the toolbar toggle buttons and color pickers, but can't get it to work for the ComboBoxs.我已经通过工具栏切换按钮和颜色选择器成功地采用了这种方法，但无法使其适用于 ComboBox。

EDIT Here is my reproducible example:编辑这是我的可重现示例：

package main;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ComboBox;
import javafx.scene.layout.VBox;
import javafx.scene.web.HTMLEditor;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class Main extends Application {
    
    boolean ifLoadComplete = false;
    
    
    @Override
    public void start(Stage _primaryStage) {

        VBox vBox = new VBox();
        vBox.setPrefWidth(800);
        vBox.setPrefHeight(800);

        HTMLEditor editor = new HTMLEditor();
        vBox.getChildren().add(editor);
        
        WebView webView = (WebView)editor.lookup("WebView");
        WebEngine webEngine = webView.getEngine();
        webEngine.getLoadWorker().stateProperty().addListener(
            new ChangeListener<Object>() {

                @SuppressWarnings({"restriction"})
                @Override
                public void changed(ObservableValue<?> observableValue, Object oldValue, Object newValue) {
                    // ok mamke sure loading the content ws successful, apparently this gets called a few times?
                    if (newValue != Worker.State.SUCCEEDED) { 
                        return; 
                    }       
                    ifLoadComplete = true;
                    
                }
            }
        );

        Button testButton = new Button("Test");
        testButton.setOnAction(new EventHandler<ActionEvent>() {
            public void handle(ActionEvent arg0) {

                if (!ifLoadComplete) return;
                
                System.out.println("Setting font size combo!");
                
                ComboBox combo = (ComboBox)editor.lookup(".font-menu-button");
                combo.getSelectionModel().select(3);
                combo.fireEvent(new ActionEvent());
            }
        });
        vBox.getChildren().add(testButton);
        
        
        String content = "<p>This is a test!</p>";
        webEngine.loadContent(content);
        
        Scene scene = new Scene(vBox);
        _primaryStage.setTitle("Test Program");
        _primaryStage.setScene(scene);
        _primaryStage.show();
    }
    
    
    
    public static void main(String[] args) {
        launch(args);
    }
}

Any ideas would be appreciated.任何想法，将不胜感激。 You can find the css reference guide for HTMLEditor here https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#htmleditor您可以在此处找到 HTMLEditor 的 css 参考指南https://docs.oracle.com/javase/8/javafx/api/javafx/scene/doc-files/cssref.html#htmleditor

Thanks谢谢

Answer 1

So I also had this problem.所以我也遇到了这个问题。 You can only set it via HTML style tag.您只能通过 HTML 样式标签进行设置。

Create a HTML file with style tag for background-color, like创建一个带有背景颜色样式标记的 HTML 文件，例如

<html>
    <head>
        <meta charset="utf-8"/>
        <style>
            body {
                background-color: #383838;
                color: #DEDEDE;
                font-family: "sans-serif";
            }
        </style>
    </head>
    <body contentEditable="true">
        YOUR_BODY
    </body>
</html>

Use the setHTMLText of the HTMLEditor to add the HTML snippet to your editor使用 HTMLEditor 的 setHTMLText 将 HTML 片段添加到您的编辑器

Enjoy a dark background享受黑暗的背景

JavaFX HTMLEditor 以编程方式触发字体大小更改

问题描述

1 个解决方案

解决方案1
0 2021-10-17 14:04:04

JavaFX HTMLEditor 以编程方式触发字体大小更改

问题描述

1 个解决方案

解决方案1 0 2021-10-17 14:04:04

解决方案1
0 2021-10-17 14:04:04