Как получить значение из редактора ACE?

Я использую редактор ACE в первый раз. У меня есть следующие вопросы, связанные с этим.

  • Как найти экземпляр редактора ACE на странице? Я не хочу для сохранения глобальной переменной, которая будет содержать экземпляр редактора. я нужно найти его экземпляр по требованию.

  • Как получить и установить его значение?

Я открыт для предложений для любого лучшего редактора, чем редактор ACE, который будет поддерживать почти все типы языков/разметки/css и т.д. и высоко интегрирован с jQuery.

Ответы

Ответ 1

За их API:

Разметка:

<div id="aceEditor" style="height: 500px; width: 500px">some text</div>

Поиск экземпляра:

var editor = ace.edit("aceEditor");

Получение/настройка значений:

var code = editor.getValue();

editor.setValue("new code here");

Основываясь на моем опыте, Ace - лучший редактор кода, который я видел. Есть несколько других, таких как CodeMirror и т.д., Но я считаю их менее полезными или трудными для интеграции, чем Ace.

Здесь страница Wiki для сравнения таких редакторов.

Есть платный, который я еще не пробовал (и пока не могу вспомнить). Будет обновлен позже, если я смогу его найти.

Ответ 2

Чтобы сохранить содержимое редактора, я поместил скрытый ввод непосредственно перед ним и инициализировал редактор следующим образом:

    var $editor = $('#editor');
    if ($editor.length > 0) {
        var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/css");
        $editor.closest('form').submit(function() {
            var code = editor.getValue();
            $editor.prev('input[type=hidden]').val(code);                
        });
    }

Когда моя форма будет отправлена, мы получим значение редактора и скопируем его на скрытый ввод.

Ответ 3

Я решаю эту проблему со скрытым вводом:)

    <input type="hidden" name="komutdosyasi" style="display: none;">
    <script src="/lib/aceeditor/src-min/ace.js" type="text/javascript" charset="utf-8"></script>

<script>
    var editor = ace.edit('editor');
        editor.session.setMode("ace/mode/batchfile");
        editor.setTheme("ace/theme/monokai");

    var input = $('input[name="komutdosyasi"]');
        editor.getSession().on("change", function () {
        input.val(editor.getSession().getValue());
    });
</script>

Ответ 4

Предположим, что у нас есть инициализированный редактор туза на теге в html. EX: <div id="MyAceEditor">this the editor place holder</div>.

В разделе javascript после загрузки ace.js

Первый шаг - найти экземпляр вашего редактора, как показано ниже.

var editor = ace.edit("MyAceEditor");

Чтобы получить значение из редактора ace, используйте метод getValue(), как показано ниже.

var myCode = editor.getSession().getValue();

Чтобы установить значение в редакторе туза (для вставки некоторого кода в редактор), используйте метод setValue(), как показано ниже.

editor.getSession().setValue("write your code here");

Ответ 5

var editor = AceEditor.getCurrentFileEditor("MyEditor");

Это вернет текущий объект редактора

var code = editor.getValue();

Это вернет текст в редакторе.