Cuando edito el código en un TextArea usando CodeMirror cómo reflejar esto en otro textarea con js o jQuery

Question

La aplicación: Tengo un elemento textarea en mi página. Se transforma usando CodeMirror, porque necesito aplicar sangría y resaltar el código html. Pic está en el enlace: [área de texto usando CodeMirror]

http://uploadingit.com/file/gxftd2cps9wm7zhp/cm.png

Aquí es el código de área de texto usando CodeMirror:

</textarea> 
    <button type="submit">Post</button>  
</form> 
<script> 

    var editor = CodeMirror.fromTextArea(document.getElementById("code"), { 
    mode: { name: "xml", htmlMode: true }, 
    lineNumbers: true, 
    tabMode: "indent", 
    matchBrackets: true, 
    path: 'js/', 
    searchMode: 'inline', 
    onCursorActivity: function() { 
     editor.setLineClass(hlLine, null); 
     hlLine = editor.setLineClass(editor.getCursor().line, "activeline"); 
    } 
    }); 

    var hlLine = editor.setLineClass(0, "activeline"); 
    </script> 

Cómo hacerlo ?: Cuando hago clic Botón de enviar, todo el código debe transmitirse a otro área de texto. Necesito esto para hacer javascript o jQuery, pero tengo problemas para hacerlo. ¿Alguna ayuda?

Para la aplicación del mundo real el código en este textarea (de la foto de arriba) debería afectar a la API de Html Designer. Es decir, cualquier cambio en el diseñador de Html debe reflejarse en este área de texto (que usó codemirror para legibilidad) y todo lo contrario. Cuando edito en el área de texto, los cambios deben reflejarse en HtmlDesigner, pero en este caso de simulación -> en el segundo textarea.

Ejemplo: como Visual Studio .Net Editor de Código WebPage que tiene el modo Designer + Source. ¿Ahora está claro?

estoy pidiendo cómo implementar el mecanismo descrito anteriormente usando javascript o jQuery. ¡Muchas gracias!

Answer 1

¿Desea copiar el texto de un TextArea (por cierto, como un control input) a otro?

//Set the button to call a Javascript function when it is clicked 
<button type="submit" onclick="copyText();">Post</button> 

<script type="text/javascript"> 
    function copyText() { 
     //Get the text in the first input 
     var text = document.getElementById("firstTextArea").getValue(); 
     //Can't use .value here as it returns the starting value of the editor 

     //Set the text in the second input to what we copied from the first 
     document.getElementById("secondTextArea").value = text; 
    } 
</script> 

Answer 2

pasar una opción onChange a CodeMirror que se ve algo como esto:

onChange: function (cm) { 
    mySecondTextArea.value = cm.getValue(); 
} 

Editado a tener en cuenta: Desde CodeMirror versión 2.0, no pasa una opción onChange más para registrar un controlador cambio, pero llama al instance.on("change", function(cm, change) { ... }). http://codemirror.net/doc/manual.html#event_change

Answer 3

onChange manejo en el espejo código no se desea:

onChange: function(cm) { mySecondTextArea.value = cm.getValue(); } 

usted tiene que utilizar:

$.fn.buildCodeMirror = function(){ 
    var cmOption {...}; 
    var cm = CodeMirror($("MyDomObjectSelector")[0],cmOption); 
    cm.on("change",$.fn.cmChange); 
} 

$.fn.cmChange = function(cm,cmChangeObject){ 
    alert("code mirror content has changed"); 
} 

Answer 4

pasado lanzó la versión en el momento (v 3.15) trabaja con esta solución:

// on and off handler like in jQuery 
CodemirrorInstance.on('change',function(cMirror){ 
    // get value right from instance 
    yourTextarea.value = cMirror.getValue(); 
}); 

Answer 5

se puede utilizar este ...

var editor_js = CodeMirror.fromTextArea(document.getElementById("js"), { 
    mode: 'text/javascript', 
    theme: 'icecoder', 
    styleActiveLine: true, 
    lineNumbers: true, 
    lineWrapping: true, 
}); 

y obtener datos con editor_js.getValue()

Answer 6

Esto funciona trabajo CodeMirror 5.22.0:

CodeMirror.fromTextArea(document.getElementById('grammar'), { 
    lineNumbers: true, 
    mode: 'pegjs', 
}).on('change', editor => { 
    console.log(editor.getValue()); 
});