Ich benutze den ACE
Editor zum ersten Mal. Ich habe die folgenden Fragen dazu.
Wie finde ich die Instanz des
ACE
Editors auf der Seite? Ich möchte keine globale Variable verwalten, die die Editorinstanz enthält. Ich muss seine Instanz auf Anfrage finden.Wie erhalte und setze ich seinen Wert?
Ich bin offen für Vorschläge für jeden besseren Editor als den ACE
Editor, der fast alle Arten von Sprache / Markup / CSS usw. unterstützt und in hohem Maße integriert ist jQuery
.
javascript
jquery
ace-editor
ShankarSangoli
quelle
quelle
Antworten:
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.
quelle
ace
Objekt? Wo ist es definiert?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.
quelle
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>
quelle
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");
quelle
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.
quelle
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>
quelle
Ich habe dem Ladeereignis einen Listener hinzugefügt und erhalte dann die Instanz:
onLoad={(editor) => { this.sourceEditor=editor; }}
Was ich später manipulieren kann.
quelle