¿Cómo obtengo valor del editor de ACE?

Question

Estoy usando el editor ACE por primera vez. Tengo las siguientes preguntas relacionadas con esto.

1. ¿Cómo puedo encontrar la instancia de ACE editor en la página? No quiero que mantenga una variable global que contendrá la instancia del editor. I necesita encontrar su instancia bajo demanda.

2. ¿Cómo obtener y establecer su valor?

Estoy abierto a sugerencias para cualquier editor mejor que ACE editor que apoyará a casi todos los tipos de lenguaje/marcado/css, etc y altamente integrado con jQuery.

Answer 1

por sus API:

de marcado:

<div id="aceEditor" style="height: 500px; width: 500px">some text</div> 

Encontrar una instancia:

var editor = ace.edit("aceEditor"); 

Conseguir/Ajuste de valores:

var code = editor.getValue(); 

editor.setValue("new code here"); 

Según mi experiencia, Ace es el mejor editor de código que he visto. Hay pocos otros como CodeMirror etc., pero me pareció que eran menos útiles o difíciles de integrar que Ace.

Here's a Wiki page for comparision of such editors.

También hay un pago que no he probado (y no recuerdo por el momento). Se actualizará más tarde si puedo encontrarlo.

Answer 2

Para guardar el contenido del editor de coloqué una entrada oculta inmediatamente antes de ella, e inicializar el editor de este modo:

var $editor = $('#editor'); 
    if ($editor.length > 0) { 
     var editor = ace.edit('editor'); 
     editor.session.setMode("ace/mode/css"); 
     $editor.closest('form').submit(function() { 
      var code = editor.getValue(); 
      $editor.prev('input[type=hidden]').val(code);     
     }); 
    } 

Cuando mi formulario se envía obtenemos el valor editor y copiarlo en el oculto entrada.

Answer 3

Supongamos que hemos inicializado el editor ace en una etiqueta en html. EX: <div id="MyAceEditor">this the editor place holder</div>.

En la sección de JavaScript, después ace.js de carga,

primer paso es encontrar la instancia del editor de la siguiente manera.

var editor = ace.edit("MyAceEditor"); 

Para obtener el valor del editor de ace, use el método getValue() como se muestra a continuación.

var myCode = editor.getSession().getValue(); 

Para establecer el valor de editor ace (para empujar un código en el editor), utilice setValue() método como a continuación.

editor.getSession().setValue("write your code here"); 

Answer 4

puedo solucionar este problema con una entrada oculta :)

<input type="hidden" name="komutdosyasi" style="display: none;"> 
    <script src="/lib/aceeditor/src-min/ace.js" type="text/javascript" charset="utf-8"></script> 

<script> 
    var editor = ace.edit('editor'); 
     editor.session.setMode("ace/mode/batchfile"); 
     editor.setTheme("ace/theme/monokai"); 

    var input = $('input[name="komutdosyasi"]'); 
     editor.getSession().on("change", function() { 
     input.val(editor.getSession().getValue()); 
    }); 
</script>