在 JavaFX 中实现 Ace 代码编辑器

Question

我正在尝试使用 JavaFX 制作代码编辑器并想使用 Ace。我看到一个较早的 post 使用 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 代码替换 java 脚本函数，例如：

<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，但不会改变以上任何内容）。

在 JavaFX 中实现 Ace 代码编辑器

Implementing the Ace Code Editor in JavaFX

java

javafx

ace-editor