在 JavaFX 中实现 Ace 代码编辑器

Question

我正在尝试使用 JavaFX 制作代码编辑器，并希望使用 Ace。我看到之前的一篇文章使用 WebView 来实现这一点，但我对如何预先设置我的项目结构有点迷茫。

Answer 1

以下是 JavaFX 的 WebView 和 Ace 编辑器的一个非常小的实现。

首先，我将使用来自 Ace repository 的一些必需的 js 文件：

• editor.html，这是主要条目。从here 下载，并将其添加到资源文件夹中，例如：src/main/resources/ace/editor.html。
• mode-java.js，从here下载，并添加到资源：src/main/resources/ace/js/mode-java.js。
• theme-eclipse.js，从here下载，并添加到资源：src/main/resources/ace/js/theme-eclipse.js。

请注意，以上项目结构对应使用 Maven 或 Gradle 构建工具。开始时，我使用了这个project 作为参考。

现在编辑editor.html 文件，并将现有脚本替换为：

<script src="js/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/eclipse");
    editor.session.setMode("ace/mode/java");
</script>

或者，用一些java代码替换javascript函数，比如：

<pre id="editor">package com.ace.editor;

import java.util.ArrayList;

public class AceEditor {

    /*
     * This is a demo
     */
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}</pre>

最后，在您的 JavaFX 代码中，添加一个 WebView 控件，然后加载编辑器：

WebView webView = new WebView(); 
WebEngine webEngine = webView.getEngine();
webEngine.load(getClass().getResource("/ace/editor.html").toExternalForm());
Scene scene = new Scene(webView, 600, 400);
...

请注意，您需要添加javafx.web 模块。这是使用 Gradle，但同样可以使用 Maven。

javafx {
    version = "13"
    modules = [ 'javafx.web' ]
}

构建并运行项目，你应该会得到代码编辑器：

更多功能可以通过修改editor.html文件，添加更多js文件，扩展编辑器选项。例如，this 表明您可以添加状态栏。

编辑

这是我的项目结构：

（它也使用 FXML，但不会改变上述任何内容）。