在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，但上面的任何内容都没有改变）。