Wie mache ich aus einem Textbereich einen ACE-Editor?

96

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?

Paul
quelle
1
Dieser Typ hat eine ziemlich tolle Lösung: gist.github.com/duncansmart/5267653
billynoah

Antworten:

159

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 .

installero
quelle
1
Der Textbereichswert sollte nur bei form.submit aktualisiert werden. Ereignis no? Außerdem: groups.google.com/group/ace-discuss/browse_thread/thread/… Es gibt keine Unterstützung für das Ersetzen von Textbereichen. Ihre Antwort ist dann die gute. Vielen Dank.
Damien
4
Manchmal müssen Sie unterwegs einen Textbereichswert aktualisieren, um beispielsweise den Entwurf für die automatische Speicherung zu implementieren.
Installero
Ich habe ein Problem mit dieser Methode: SMS 'SELECT 1 OR 2;' on ace.editor wird in 'SELECT&nbsp;1OR&nbps;2;'den Textbereich gestellt. Kann mir jemand sagen, was ich falsch mache?
Alexglue
alexglue, hast du Leerzeichen gesetzt: Nowrap auf deinem Textbereich? github.com/ajaxorg/ace/issues/900
installero
Installero, ich habe keine CSS-Eigenschaft in meinem Textbereich. Also, nein, habe ich nicht.
Alexglue
33

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>

Billynoah
quelle
3
Sehr empfehlenswert. Sehr flexibel und sauber!
aaandre
5
Die einzige Änderung, die ich am obigen Code vorgenommen habe, ist textarea.css ('Sichtbarkeit', 'versteckt') geändert; zu textarea.css ('display', 'none'); Ansonsten bekam ich extra Leerzeichen auf dem Bildschirm
Nick Goloborodko
@ NickGoloborodko - ein paar Jahre zu spät hier, aber ich stimme zu und ich habe die Antwort entsprechend aktualisiert. Außerdem wurde der Ass-Link behoben, sodass das Snippet wieder funktioniert.
Billynoah
@billynoah Ich habe diesen Code verwendet, aber ich habe ein Leerzeichen, das nicht bearbeitet werden kann. Wie kann ich das möglicherweise beheben? Danke
bleyk
Ich habe keine Ahnung, offensichtlich haben Sie diesen Code nicht genau so verwendet, wie er ist, oder er hätte funktioniert - genau wie das Snippet. Wenn Sie Hilfe beim Debuggen benötigen, sollten Sie eine neue Frage stellen.
Billynoah
8

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>
Breck
quelle
1

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.

Bobby
quelle
8
Außer nein. Wenn Sie aufrufen, erhalten ace.edit('code1')Sie Müll wie: <textarea class="ace_editor ace-twilight ace_focus"><div class="ace_gutter">...</textarea>Mit anderen Worten, die ace.edit versucht, sich in den Textbereich zu stopfen, und das ist nicht sehr schön.
Ciantic
0

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>

Nic Scozzaro
quelle
Ich sehe jemanden, der herabgestimmt hat ... hat es bei Ihnen nicht funktioniert?
Nic Scozzaro