Me gustaría poder convertir áreas de texto específicas en una página para que sean editores de ACE.

¿Alguien tiene algún puntero por favor?

Editar:

Tengo el archivo editor.html trabajando con un área de texto, pero tan pronto como agrego un segundo, el segundo no se convierte en un editor.

EDITAR 2:

Decidí descartar la idea de tener varios y, en su lugar, abrir uno en una nueva ventana. Mi nuevo problema es que cuando oculto () y muestro () el área de texto, la pantalla falla. ¿Algunas ideas?

96
Paul 22 jun. 2011 a las 17:12

5 respuestas

La mejor respuesta

Según tengo entendido la idea de Ace, no deberías hacer un textarea un editor Ace en sí. Debería crear un div adicional y actualizar el área de texto utilizando la función .getSession () en su lugar.

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

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

Solo cuando envía el formulario con el área de texto dada. No estoy seguro de si esta es la forma correcta de usar Ace, pero es la forma en que se usa en GitHub .

155
installero 22 oct. 2012 a las 13:54

Para crear una editora simplemente haz:

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

Deben estar explícitamente posicionados y dimensionados. Por show () y hide () creo que te estás refiriendo a las funciones de jQuery. No estoy seguro exactamente cómo lo hacen, pero no puede modificar el espacio que ocupa en el DOM. Me escondo y muestro usando:

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

Si utiliza la propiedad 'display' css, no funcionará.

Consulte la wiki aquí para saber cómo agregar temas, modos, etc. https: //github.com/ajaxorg/ace/wiki/Embedding---API

Nota: no tienen que ser áreas de texto, pueden ser cualquier elemento que desee.

1
Bobby 19 sep. 2011 a las 23:20

Para cualquier persona como yo que haya sido enrutada a esta página y solo quiera un ejemplo de trabajo mínimo, que se pueda copiar y pegar, de usar Ace usando la biblioteca de CDN:

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="editor">function(){}</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 = "300px";
    </script>
  </body>
</html>

Rendimientos: ingrese la descripción de la imagen aquí

-1
Nic Scozzaro 20 abr. 2019 a las 02:52

Puedes tener múltiples Editores Ace. Simplemente proporcione un ID a cada área de texto y cree un Ace Editor para ambos IDS de esta manera:

<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>
8
Breck 28 jul. 2011 a las 20:31

Duncansmart tiene una solución bastante impresionante en su página de github, progresivo-as que demuestra una manera simple de conectar un editor ACE a su página.

Básicamente, obtenemos todos los elementos <textarea> con el atributo data-editor y los convertimos en un editor ACE. El ejemplo también establece algunas propiedades que debe personalizar a su gusto, y demuestra cómo puede usar los atributos data para establecer propiedades por elemento, como mostrar y ocultar la canaleta 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>
29
billynoah 29 nov. 2017 a las 06:03