Question

我正在尝试在Webview中嵌入CodeMirror js编辑器，大量借鉴了我在这篇文章中找到的代码。 http://github.com/jewelsea/conception

JavaFX code editor with content highlighter for Java Code

这是html模板

<!doctype html>
<html>
    <head>  
        <link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
        <link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">  
        <script src="http://codemirror.net/lib/codemirror.js"></script>  
        <script src="http://codemirror.net/mode/sql/sql.js"></script>
    </head>
    <body>
        <form>
            <textarea id="code" name="code">--This is code inside the SQLTtool;&#10;INSERT INTO thing&#10;${code}</textarea>
        </form>
        <script>  var editor = CodeMirror.fromTextArea(document.getElementById("code"), { lineNumbers: true, matchBrackets: true, mode: "text/x-mssql", lineWrapping: true, theme: "cobalt"});
        </script>
    </body>
</html>

Firefox渲染

enter image description here

Webview渲染

enter image description here

不可否认，我不知道自己在这里做什么，因为我是JavaFX的新手并且没有使用JavaScript的经验。有什么想法吗？

的Env

赢7 64

java版＆＃34; 1.8.0_40＆＃34; Java（TM）SE运行时环境（版本1.8.0_40-b25） Java HotSpot（TM）64位服务器VM（版本25.40-b25，混合模式）

代码

（我已将代码从Conception项目中删除到更基本的设置）

@Override
public void start(Stage stage) throws Exception {   

    //set-up window 
    stage.setTitle("SQL Tool");
    stage.setMinWidth(800);
    stage.setMinHeight(600);
    stage.setScene(createScene());      
    stage.show();
}

private Scene createScene() throws IOException{

    final AnchorPane ap1 = new AnchorPane(createButton());
    final AnchorPane ap2 = new AnchorPane(createWebView());
    ap2.setBackground(new Background(new BackgroundFill(Color.AZURE,CornerRadii.EMPTY,Insets.EMPTY)));

    Scene scene = new Scene(layoutScene(
            ap1,
            ap2
    ));

    return scene;
}

private WebView createWebView() throws IOException{
    String template = Resources.toString(getResource("codemirror.html"), Charsets.UTF_8);
    WebView webview = new WebView();
    webview.getEngine().loadContent(template);
    AnchorPane.setLeftAnchor(webview, 10.0);
    AnchorPane.setRightAnchor(webview, 10.0);
    AnchorPane.setBottomAnchor(webview, 10.0);
    AnchorPane.setTopAnchor(webview, 10.0);
    return webview;
}

//set-up primary layout
private SplitPane layoutScene(Node... nodes) {
    final SplitPane layout = new SplitPane();
    layout.setOrientation(Orientation.VERTICAL);
    layout.setDividerPositions(.4f);
    layout.getItems().addAll(nodes);
    return layout;
}

private URL getResource(String name) {
    return getClass().getResource("resources/" + name);
}

Answer 1

所以 - 除了代理服务器可能导致反直觉的结果之外，我在本地下载所有资源后在代码中发现了一个小问题。我将HTML标题更改为：

<head>  
    <link rel="stylesheet" href="./codemirror.css">
    <link rel="stylesheet" href="./cobalt.css">  
    <script src="./codemirror.js"></script>  
    <script src="./sql.js"></script>
</head>

页面仍然无法正常呈现。我不得不改变这段代码：

String template = Resources.toString(getResource("codemirror.html"), Charsets.UTF_8);
WebView webview = new WebView();
webview.getEngine().loadContent(template);

对此：

URL url = getResource("codemirror.html");
webview.getEngine().load(url.toExternalForm());

似乎当你使用.loadContent（）加载html时，没有相关链接的上下文。我能够通过将一小段JS放入html并发现文档位置是＆＃34;空白＆＃34;来确定这一点。也许这应该是显而易见的

JavaFX WebView中的嵌入式HTML无法正确呈现

的Env

代码

1 个答案: