Como posso transformar uma área de texto em um editor ACE?

Eu gostaria de ser capaz de converter áreas de texto específicas em uma página para serem editores ACE.

Alguém tem dicas, por favor?

EDITAR:

Eu tenho o arquivo editor.html trabalhando com uma textarea, mas assim que adiciono uma segunda, a segunda não é convertida em um editor.

EDIT 2:

Decidi descartar a ideia de ter vários e, em vez disso, abrir um em uma nova janela. Minha nova situação é que, quando oculto () e mostro () a área de texto, a exibição fica errada. Alguma ideia?

Até onde eu entendi a ideia do Ace, você não deveria fazer de uma textarea um editor do Ace. Você deve criar uma div adicional e atualizar textarea usando a função .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());
});

ou apenas ligue

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

somente quando você enviar o formulário com a área de texto fornecida. Não tenho certeza se essa é a maneira certa de usar o Ace, mas é a maneira como ele é usado no GitHub .

Duncansmart tem uma solução incrível em sua página do github, o progressivo-ace que demonstra uma maneira simples de conectar um editor ACE à sua página.

Basicamente, obtemos todos os <textarea>elementos com o data-editoratributo e convertemos cada um em um editor ACE. O exemplo também define algumas propriedades que você deve personalizar ao seu gosto e demonstra como você pode usar dataatributos para definir propriedades por elemento, como mostrar e ocultar a sarjeta com 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>

Você pode ter vários Editores Ace. Basta dar a cada textarea um ID e criar um Ace Editor para ambos IDS, assim:

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

Para criar um editor, basta fazer:

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

Eles devem ser posicionados e dimensionados explicitamente. Por show () e hide () acredito que você esteja se referindo às funções jQuery. Não sei exatamente como eles fazem isso, mas não pode modificar o espaço que ocupa no DOM. Eu escondo e mostro usando:

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

Se você usar a propriedade css 'display', isso não funcionará.

Confira o wiki aqui para saber como adicionar temas, modos, etc ... https://github.com/ajaxorg/ace/wiki/Embedding---API

Nota: eles não precisam ser áreas de texto, eles podem ser qualquer elemento que você quiser.

Para alguém como eu que quer apenas um exemplo prático e mínimo de usar o Ace do 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>