JavaFX WebView 滚动问题中的 Ace Editor（大步长）

Question

我正在使用嵌入在 JavaFX 中的 WebView 中的 ace 编辑器，但在滚动方面遇到了一个小问题。

滚动不是连续的，而是以大步长跳跃。

如果有人以前遇到过这个问题并解决了这个问题？任何帮助，将不胜感激。 (以下是嵌入webview的ace编辑器demo)

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class AceEditorExample extends Application {

    @Override
    public void start(Stage primaryStage) {
        WebView webView = new WebView();

        webView.getEngine().load("https://ace.c9.io/demo/emmet.html");
        AnchorPane.setLeftAnchor(webView, 0d);
        AnchorPane.setTopAnchor(webView, 0d);
        AnchorPane.setRightAnchor(webView, 0d);
        AnchorPane.setBottomAnchor(webView, 0d);

        primaryStage.setScene(new Scene(new AnchorPane(webView), 400, 300));
        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 1

获得更平滑滚动的解决方案相对简单：

首先，您需要有一份 html 文件的本地副本。下载 emmet.html 和所需的 js 文件。

编辑html文件，找到定义editor的脚本：

<script>
...
require(["ace/ace", "ace/ext/emmet"], function(ace) {
    var editor = ace.edit("editor");
    editor.session.setMode("ace/mode/html");
    ...
}); 
</script>

在这里您可以调整滚动速度。这对我来说很好用：

<script>
...
require(["ace/ace", "ace/ext/emmet"], function(ace) {
    var editor = ace.edit("editor");
    editor.session.setMode("ace/mode/html");

    // Adjust scrolling speed:
    editor.setScrollSpeed(0.05);
    ...
}); 
</script>

现在保存文件。

第二部分应该像加载本地一样简单emmet.html:

webEngine.load(getClass().getResource("emmet.html").toExternalForm());

但由于 JDK 8u60 中的 bug，在修复之前您可能需要使用解决方法：

使用 Dropbox 或类似工具托管 html 和 js 文件，以便在线 url。
处理读取 html 文件的本地字符串（我不确定这是否适用于 js 所需的文件）。

JavaFX WebView 滚动问题中的 Ace Editor（大步长）

Ace Editor in JavaFX WebView Scrolling Issues (large step size)

javafx

javafx-2

ace-editor

javafx-8

javafx-webengine