Wie mache ich aus einem Textbereich einen ACE-Editor?

Ich möchte in der Lage sein, bestimmte Textbereiche auf einer Seite in ACE-Editoren umzuwandeln.

Hat jemand bitte irgendwelche Hinweise?

BEARBEITEN:

Ich habe die Datei editor.html, die mit einem Textbereich arbeitet, aber sobald ich eine zweite hinzufüge, wird die zweite nicht in einen Editor konvertiert.

EDIT 2:

Ich beschloss, die Idee, mehrere zu haben, zu verwerfen und stattdessen eine in einem neuen Fenster zu öffnen. Meine neue Situation ist, dass wenn ich den Textbereich verstecke () und zeige (), die Anzeige schief geht. Irgendwelche Ideen?

Soweit ich die Idee von Ace verstanden habe, sollten Sie einen Textbereich nicht selbst zu einem Ace-Editor machen. Sie sollten stattdessen ein zusätzliches div erstellen und den Textbereich mit der Funktion .getSession () aktualisieren .

html

<textarea name="description"/>
<div id="description"/>

js

var editor = ace.edit("description");
var textarea = $('textarea[name="description"]').hide();
editor.getSession().setValue(textarea.val());
editor.getSession().on('change', function(){
  textarea.val(editor.getSession().getValue());
});

oder einfach anrufen

textarea.val(editor.getSession().getValue());

Nur wenn Sie das Formular mit dem angegebenen Textbereich einreichen. Ich bin mir nicht sicher, ob dies der richtige Weg ist, Ace zu verwenden, aber es ist der Weg, wie es auf GitHub verwendet wird .

Duncansmart hat eine ziemlich großartige Lösung auf seiner Github-Seite, Progressive-Ace, die eine einfache Möglichkeit demonstriert, einen ACE-Editor an Ihre Seite anzuschließen .

Grundsätzlich erhalten wir alle <textarea>Elemente mit dem data-editorAttribut und konvertieren jedes in einen ACE-Editor. Das Beispiel legt auch einige Eigenschaften fest, die Sie nach Ihren Wünschen anpassen sollten, und zeigt, wie Sie mithilfe von dataAttributen Eigenschaften pro Element festlegen können, z. B. das Ein- und Ausblenden der Rinne data-gutter.

// Hook up ACE editor to all textareas with data-editor attribute
$(function() {
  $('textarea[data-editor]').each(function() {
    var textarea = $(this);
    var mode = textarea.data('editor');
    var editDiv = $('<div>', {
      position: 'absolute',
      width: textarea.width(),
      height: textarea.height(),
      'class': textarea.attr('class')
    }).insertBefore(textarea);
    textarea.css('display', 'none');
    var editor = ace.edit(editDiv[0]);
    editor.renderer.setShowGutter(textarea.data('gutter'));
    editor.getSession().setValue(textarea.val());
    editor.getSession().setMode("ace/mode/" + mode);
    editor.setTheme("ace/theme/idle_fingers");

    // copy back to textarea on form submit...
    textarea.closest('form').submit(function() {
      textarea.val(editor.getSession().getValue());
    })
  });
});

textarea {
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.9/ace.js"></script>
<textarea name="my-xml-editor" data-editor="xml" data-gutter="1" rows="15"></textarea>
<br>
<textarea name="my-markdown-editor" data-editor="markdown" data-gutter="0" rows="15"></textarea>

Sie können mehrere Ace-Editoren haben. Geben Sie einfach jedem Textbereich eine ID und erstellen Sie einen Ass-Editor für beide IDS wie folgt:

<style>
#editor, #editor2 {
    position: absolute;
    width: 600px;
    height: 400px;
}
</style>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor">some text</div>
</div>
<div style="position:relative; height: 450px; " >
&nbsp;
<div id="editor2">some text</div>
</div>
<script src="ace.js" type="text/javascript" charset="utf-8"></script>
<script src="theme-twilight.js" type="text/javascript" charset="utf-8"></script>
<script src="mode-xml.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    var XmlMode = require("ace/mode/xml").Mode;
    editor.getSession().setMode(new XmlMode());

    var editor2 = ace.edit("editor2");
    editor2.setTheme("ace/theme/twilight");
    editor2.getSession().setMode(new XmlMode());

};
</script>

Um einen Editor zu erstellen, gehen Sie einfach wie folgt vor:

HTML:

<textarea id="code1"></textarea>
<textarea id="code2"></textarea>

JS:

var editor1 = ace.edit('code1');
var editor2 = ace.edit('code2');
editor1.getSession().setValue("this text will be in the first editor");
editor2.getSession().setValue("and this in the second");

CSS:

#code1, code2 { 
  position: absolute;
  width: 400px;
  height: 50px;
}

Sie müssen explizit positioniert und dimensioniert werden. Mit show () und hide () beziehen Sie sich meiner Meinung nach auf die jQuery-Funktionen. Ich bin mir nicht sicher, wie sie es genau machen, aber es kann den Speicherplatz im DOM nicht ändern. Ich verstecke und zeige mit:

$('#code1').css('visibility', 'visible');
$('#code2').css('visibility', 'hidden');

Wenn Sie die CSS-Eigenschaft 'display' verwenden, funktioniert dies nicht.

Im Wiki finden Sie Informationen zum Hinzufügen von Themen, Modi usw. https://github.com/ajaxorg/ace/wiki/Embedding---API

Hinweis: Sie müssen keine Textbereiche sein, sondern können jedes gewünschte Element sein.

Für alle wie mich, die nur ein minimales, funktionierendes Beispiel für die Verwendung von Ace aus dem CDN wünschen:

<!DOCTYPE html>
<html lang="en">

<body style="margin:0">
  <div id="editor">function () { 
  console.log('this is a demo, try typing!')
}
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js" type="text/javascript" charset="utf-8"></script>
  <script>
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    document.getElementById("editor").style.height = "120px";
  </script>
</body>

</html>