1

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

如果在 web 视图中没有选择任何内容，这很好用，但是如果选择了一些文本并且我单击粗体按钮，则文本变为粗体，但一旦我取消选择文本，它就会被删除。

我创建了一个测试用例，其中包含一个 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();
    }
}

测试.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>
4

0 回答 0