Wie erhalte ich Wert vom ACE-Editor?

75

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.

ShankarSangoli
quelle
5
Oh, was für ein Durcheinander. Der jetzt als "ace" bekannte Editor unterstützt die Cloud9-IDE ( cloud9-ide ). Die Editor-Engine war früher als Skywriter ( Skywriter ) bekannt, und das war früher als Bespin ( Bespin , Embedded-Bespin ) bekannt. Ärgerlicherweise ist das aktuelle Ass- Tag nicht für den Editor.
Charles
@ Charles: Und dein Punkt ist ...?
Mrchief
@ Mrchief, vier Tags für eine Sache sind eine Schlechtigkeit. Vielen Dank, dass Sie mich bei der Erstellung der neuen Tags geschlagen haben. Wenn Sie nicht vor mir dazu kommen, werde ich die anderen Tags durchgehen und das neue zu relevanten Fragen hinzufügen.
Charles
@ Charles: Kann oder kann nicht sein. Da der Ass-Editor ein Javascript-Ding ist, benötigt er das JS-Tag. Da das OP auch eine Integration mit jQuery anstrebt, ist jQuery ebenfalls sinnvoll. Ich habe das falsche 'Ass'-Tag entfernt.
Mrchief

Antworten:

142

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.

Mrchief
quelle
Ace vs CodeMirror 1. Wenn Sie also einen sehr kleinen Editor benötigen oder die Funktionsweise von Ace nicht mögen und das meiste davon neu implementieren möchten, ist Codemirror der bessere Weg. 2. Wenn Sie jedoch einen Editor benötigen, der mit Desktop-Editoren vergleichbar ist, ohne 300 KB Ihres eigenen Code-Asses hinzuzufügen, ist IMHO die bessere Wahl.
Igaurav
1
Woher kommt das aceObjekt? Wo ist es definiert?
Manu Chadha
Wenn ich dies tue, bekomme ich Fenster nicht definiert Fehler kann mich jemand führen, sollte ich etwas in der Konfiguration ändern
Mia
17

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.

Ben Foster
quelle
8

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>   
SelçukDERE
quelle
7

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");
Sairam Venkata
quelle
Wie installiere ich den Ace Editor, um ihn in meinem Typoskript-Code zu verwenden, um ihn zu automatisieren?
Mia
0
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.

Nithish
quelle
Wie installiere ich ace npm und wie importiere ich es in meinen Typoskript-Code? Kannst du mich führen?
Mia
0

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>
MbeforeL
quelle
0

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

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

Was ich später manipulieren kann.

gal007
quelle