Як отримати значення від редактора ACE?

Я використовую ACEредактор вперше. У мене є наступні запитання, пов’язані з цим.

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

2. Як отримати та встановити його значення?

Я відкритий для пропозицій щодо будь-якого кращого редактора, ніж ACEредактор, який підтримуватиме майже всі типи мови / розмітки / css і т.д. і має високу інтеграцію з jQuery.

Відповідно до їх 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 для порівняння таких редакторів .

Є також платний, який я ще не пробував (і наразі не пам’ятаю). Буде оновлено пізніше, якщо я зможу його знайти.

Щоб зберегти вміст редактора, я розмістив прихований ввід безпосередньо перед ним та ініціалізував редактор так:

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

Коли моя форма подана, ми отримуємо значення редактора та копіюємо його на прихований ввід.

Я вирішую цю проблему за допомогою прихованого вводу :)

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

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

У розділі javascript, після завантаження ace.js,

Першим кроком є ​​пошук екземпляра вашого редактора, як показано нижче.

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

Щоб отримати значення з редактора тузу, використовуйте метод getValue (), як показано нижче.

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

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

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

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

Це поверне поточний об'єкт редактора

var code = editor.getValue();

Це поверне текст у редакторі.

Використовуйте наступний код, щоб отримати значення редактора тузу, який буде мати html

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

тоді

<script >
 var some = $('#aceEditor');

 some.keyup(function() {
  var code = editor.getSession().getValue();
  $.ajax({
       type: "POST",
       url: "{% url 'creatd-new' %}",
       data: {'code':code},
       success: function (data) {
           console.log("foo");
       }
     });
     }
      </script>

Я додав слухач до події завантаження, а потім отримую екземпляр:

onLoad={(editor) => {
    this.sourceEditor=editor;
}}

Якими я можу потім маніпулювати.