Come faccio a trasformare un'area di testo in un editor ACE?

Mi piacerebbe poter convertire aree di testo specifiche su una pagina per essere editori ACE.

Qualcuno ha qualche suggerimento per favore?

MODIFICARE:

Ho il file editor.html che funziona con una textarea, ma non appena ne aggiungo una seconda, la seconda non viene convertita in un editor.

MODIFICA 2:

Ho deciso di scartare l'idea di averne diversi e invece di aprirne uno in una nuova finestra. La mia nuova situazione è che quando nascondo () e mostro () l'area di testo, il display va storto. Qualche idea?

Per quanto ho capito l'idea di Ace, non si dovrebbe fare una textarea un editor asso stessa. Dovresti creare un div aggiuntivo e aggiornare l'area di testo usando invece la funzione .getSession () .

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

o semplicemente chiama

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

solo quando invii il modulo con la textarea data. Non sono sicuro che questo sia il modo giusto per usare Ace, ma è il modo in cui viene utilizzato su GitHub .

Duncansmart ha una soluzione davvero fantastica sulla sua pagina github, progressive-ace, che mostra un modo semplice per collegare un editor ACE alla tua pagina.

Fondamentalmente otteniamo tutti gli <textarea>elementi con l' data-editorattributo e li convertiamo in un editor ACE. L'esempio imposta anche alcune proprietà che dovresti personalizzare a tuo piacimento e dimostra come puoi usare gli dataattributi per impostare proprietà per elemento come mostrare e nascondere la grondaia con 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>

Puoi avere più Ace Editors. Basta dare a ciascuna area di testo un ID e creare un Ace Editor per entrambi gli ID in questo modo:

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

Per creare un editor basta fare:

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

Devono essere posizionati e dimensionati in modo esplicito. Con show () e hide () credo che ti riferisci alle funzioni jQuery. Non sono sicuro di come lo facciano, ma non può modificare lo spazio che occupa nel DOM. Mi nascondo e mostro usando:

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

Se usi la proprietà css 'display' non funzionerà.

Dai un'occhiata al wiki qui per come aggiungere temi, modalità, ecc ... https://github.com/ajaxorg/ace/wiki/Embedding---API

Nota: non devono essere aree di testo, possono essere qualsiasi elemento tu voglia.

Per chi come me vuole solo un esempio minimo e funzionante di utilizzo di Ace dalla CDN:

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