Wie erhalte ich Wert vom ACE-Editor?

Ich benutze den ACEEditor zum ersten Mal. Ich habe die folgenden Fragen dazu.

1. Wie finde ich die Instanz des ACEEditors auf der Seite? Ich möchte keine globale Variable verwalten, die die Editorinstanz enthält. Ich muss seine Instanz auf Anfrage finden.

2. Wie erhalte und setze ich seinen Wert?

Ich bin offen für Vorschläge für jeden besseren Editor als den ACEEditor, der fast alle Arten von Sprache / Markup / CSS usw. unterstützt und in hohem Maße integriert ist jQuery.

Gemäß ihrer API :

Markup:

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

Eine Instanz finden:

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

Werte abrufen / einstellen:

var code = editor.getValue();

editor.setValue("new code here");

Aufgrund meiner Erfahrung ist Ace der beste Code-Editor, den ich je gesehen habe. Es gibt nur wenige andere wie CodeMirror usw., aber ich fand sie weniger nützlich oder schwer zu integrieren als Ace.

Hier ist eine Wiki-Seite zum Vergleich solcher Editoren .

Es gibt auch eine bezahlte, die ich nicht ausprobiert habe (und an die ich mich vorerst nicht erinnern kann). Wird später aktualisiert, wenn ich es finden kann.

Um den Inhalt des Editors zu speichern, habe ich unmittelbar davor eine versteckte Eingabe platziert und den Editor folgendermaßen initialisiert:

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

Wenn mein Formular gesendet wird, erhalten wir den Editorwert und kopieren ihn in die versteckte Eingabe.

Ich löse dieses Problem mit einer versteckten Eingabe :)

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

Nehmen wir an, wir haben den Ass-Editor für ein Tag in HTML initialisiert. EX : <div id="MyAceEditor">this the editor place holder</div>.

Im Javascript-Abschnitt wird nach dem Laden von ace.js

Der erste Schritt besteht darin, die Instanz Ihres Editors wie folgt zu finden.

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

Verwenden Sie die unten stehende Methode getValue (), um den Wert aus dem Ass-Editor abzurufen.

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

Verwenden Sie die folgende setValue()Methode, um den Wert auf den Ass-Editor zu setzen (um Code in den Editor zu verschieben) .

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

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

Dies würde das aktuelle Editorobjekt zurückgeben

var code = editor.getValue();

Dies würde den Text im Editor zurückgeben.

Verwenden Sie den folgenden Code, um den Wert des Ass-Editors zu ermitteln, den HTML haben wird

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

dann

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

Ich habe dem Ladeereignis einen Listener hinzugefügt und erhalte dann die Instanz:

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

Was ich später manipulieren kann.