javascript - rich - ¿Cómo puedo hacer que un área de texto sea un editor de ACE?

wysiwyg editor javascript

Question

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

¿Alguien tiene punteros, 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 a un editor.

EDICION 2:

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

Answer 1

Duncansmart tiene una solución bastante impresionante en su página github, gist.github.com/duncansmart/5267653 que demuestra una forma simple de conectar un editor de ACE a su página.

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

Answer 2

Para crear un editor simplemente hazlo:

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 posicionados y dimensionados explícitamente. Por show () y hide () Creo que te estás refiriendo a las funciones 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 usa la ''visualización'' de la propiedad 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.

Answer 3

Por lo que entendí la idea de Ace, no debes convertir un área de texto en un editor Ace. Debería crear un div adicional y actualizar el área de texto usando la función .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 solo llame

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 .

Answer 4

Puedes tener varios Ace Editors. Simplemente proporcione a cada área de texto un ID 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>