在 JavaFX 中实现 Ace 代码编辑器

Question

我正在尝试使用 JavaFX 制作代码编辑器并想使用Ace。我看到过一篇使用 WebView 来实现这一点的早期帖子，但我对如何事先设置我的项目结构有点迷茫。

Answer 1

以下是使用 JavaFX 的 WebView 和 Ace 编辑器的最小实现。

首先，我将使用 Ace存储库中的一些必需 js 文件：

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

请注意，上述项目结构与使用 Maven 或 Gradle 构建工具相对应。首先，我使用这个项目作为参考。

现在编辑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 文件来添加更多功能，以扩展编辑器选项。例如，这表明您可以添加状态栏。

编辑

这是我的项目结构：

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