javascript - builds - ¿Cómo obtengo valor del editor de ACE?

ace editor react

Question

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

1. ¿Cómo encuentro la instancia del editor de ACE en la página? No quiero mantener una variable global que contenga la instancia del editor. Necesito encontrar su instancia bajo demanda.

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

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

Answer 1

Para guardar los contenidos del editor, coloqué una entrada oculta inmediatamente antes, e inicialicé el editor de la siguiente manera:

    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 se envía mi formulario obtenemos el valor del editor y lo copiamos a la entrada oculta.

Answer 2

Por su API :

Margen:

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

Encontrar una instancia:

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

Obteniendo / Configurando 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 los considero menos útiles o difíciles de integrar que el As.

Aquí hay una página de Wiki para la comparación de dichos editores .

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

Answer 3

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

Answer 4

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 javascript, después de cargar ace.js,

El primer paso es encontrar la instancia de su 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 en el editor ace (para insertar algún código en el editor), use el método setValue() como se muestra a continuación.

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