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

Question

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

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

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

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

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

588 4

jQuery javascript ace-editor

4 ответов:

Comments

Ничего не найдено.

Mrchief · Accepted Answer · 2015-07-15 09:42:39

в своем 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 etc. но я нашел их менее полезными или трудными для интеграции, чем Ace.

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

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

Ben Foster · Accepted Answer · 2012-06-13 14:25:59

чтобы сохранить содержимое редактора, я поместил скрытый ввод непосредственно перед ним и инициализировал редактор следующим образом:
    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);                
        });
    }
при отправке моей формы мы получаем значение редактора и копируем его в скрытый вход.

Sairam Venkata · Accepted Answer · 2013-11-29 09:51:26

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

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

первый шаг-найти экземпляр вашего редактора, как показано ниже.
var editor = ace.edit("MyAceEditor");
чтобы получить значение из редактора ace, используйте метод getValue (), как показано ниже.
var myCode = editor.getSession().getValue();
чтобы установить значение Ace editor(чтобы вставить некоторый код в Редактор), используйте setValue() метод, как показано ниже.
editor.getSession().setValue("write your code here");

SelçukDERE · Accepted Answer · 2014-05-31 03:39:14

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

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