Question

我正在使用WebView来实现富文本编辑器。我有一个带控制按钮的JavaFX工具栏（粗体，斜体等）和下面的webview。当用户单击工具栏中的按钮时，我使用javascript命令document.execCommand来操作webview。

如果在webview中未选择任何内容，则此功能非常有效，但如果选择了某些文本并单击粗体按钮，则文本将变为粗体，但只要取消选中该文本，该文本就会被删除。

我创建了一个带有JavaFX按钮的测试用例和一个带有contenteditable集的WebView和一个HTML按钮，以显示当我点击它时不会发生这种情况，即使它使用与JavaFX相同的document.execCommand按钮。在我点击JavaFX按钮时，WebView失去焦点似乎是个问题。有没有人解决这个问题，或者我注定要在HTML中实现工具栏？

WebViewTest.java：

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class WebViewTest extends Application {
    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) {
        primaryStage.setTitle("Hello World!");
        final WebView webView = new WebView();
        webView.getEngine().load(getClass().getResource("test.html").toExternalForm());

        StackPane root = new StackPane();
        VBox box = new VBox();
        Button button = new Button();
        button.setText("Bold");
        button.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent actionEvent) {
                webView.getEngine().executeScript("bold();");
            }
        });
        box.getChildren().add(button);
        box.getChildren().add(webView);
        root.getChildren().add(box);
        primaryStage.setScene(new Scene(root, 300, 250));
        primaryStage.show();
    }
}

的test.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
    <title>TinyMCE Test</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script>
        window.onload = function() {
            document.designMode = "on";
        };

        function bold() {
            document.execCommand("bold");
        }
    </script>
</head>
<body>
    <br /><br /><input type="button" value="Bold" onclick="bold();" />
</body>
</html>

使用document.execCommand与WebView进行交互

0 个答案: