Как мне получить значение от редактора ACE? - PullRequest
Новая
       10

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

57 голосов
/ 22 января 2012

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

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

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

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

Ответы [ 5 ]

117 голосов
/ 23 января 2012

за их API :

Markup: 

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

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

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

15 голосов
/ 13 июня 2012

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

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

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

8 голосов
/ 31 мая 2014

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

    <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>
6 голосов
/ 29 ноября 2013

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

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

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

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

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

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

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

editor.getSession().setValue("write your code here");
0 голосов
/ 26 июня 2019 
var editor = AceEditor.getCurrentFileEditor("MyEditor");

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

var code = editor.getValue();

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

...