1

WebViewを使用してリッチテキストエディタを実装しています。コントロールボタン（太字、斜体など）を備えたJavaFXツールバーと、その下のWebビューがあります。ユーザーがツールバーのボタンをクリックすると、javascriptコマンドdocument.execCommandを使用してWebビューを操作します。

これは、Webビューで何も選択されていない場合にうまく機能しますが、テキストを選択して太字のボタンをクリックすると、テキストは太字になりますが、テキストの選択を解除するとすぐに削除されます。

JavaFXボタンとcontenteditableセットとHTMLボタンを備えたWebViewを使用してテストケースを作成し、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>
4

0 に答える 0