JavaFXのでエースコードエディタを実装します

GL：

私はJavaFXのを使用してコードエディタを作成し、使用したいしようとしていますエース。私は中古のWebViewはこれを達成するという以前の記事を見ましたが、私は事前に私のプロジェクト構造を設定する方法にはほとんどが失われています。

ホセ・ペリーダ：

以下は、JavaFXの者のWebViewとエースエディタで非常に最小限の実装です。

開始するには、私はエースから、いくつかの必要な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ファイルを追加します。例えば、このショーは、あなたは、ステータスバーを追加することができます。

EDIT

これは私のプロジェクト構造であります：

（それだけでなく、FXMLを使用していますが、上記の何も変更しません）。

JavaFXのでエースコードエディタを実装します

おすすめ