Реализация редактора кода Ace в JavaFX - PullRequest
Новая
       22

Реализация редактора кода Ace в JavaFX

2 голосов
/ 19 октября 2019

Я пытаюсь создать редактор кода с использованием JavaFX и хочу использовать Ace . Я видел предыдущую статью, в которой для достижения этой цели использовался WebView, но я немного растерялся, как заранее настроить структуру своего проекта.

1 Ответ

4 голосов
/ 19 октября 2019

Ниже приведена очень минимальная реализация с JavaFX WebView и редактором Ace.

Для начала я просто воспользуюсь несколькими необходимыми js-файлами из репозитория Ace :

  • 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>

По желанию,замените функцию javascript некоторым кодом java, например: 

<code><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");
    }
}

Наконец, в своем коде 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' ]
}

Создайте и запустите проект, и вы должны получить редактор кода:

Ace editor

Дополнительные функции можно добавить, изменив файл editor.html и добавив дополнительные файлы js, чтобы расширить параметры редактора. Например, это показывает, что вы можете добавить строку состояния.

РЕДАКТИРОВАТЬ

Это моя структура проекта:

image

(он также использует FXML, но ничего из вышеперечисленного не меняет).

...