javascript - Cuando edito el código en un TextArea usando CodeMirror, cómo reflejar esto en otro área de texto con js o jQuery

asp.net visual-studio-2010

Question

La aplicación: Tengo un elemento textarea en mi página. Se transforma usando CodeMirror, porque necesito sangrar y resaltar el código html dentro de él. La foto está en el enlace: [textarea using codemirror]

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

Aquí está el código para textarea 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 en el botón Publicar, todo el código debería transmitirse a otro área de texto. Necesito hacer esto con javascript o jQuery, pero teniendo dificultades para hacerlo. ¿Alguna ayuda?

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

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

Estoy preguntando cómo implementar el mecanismo descrito anteriormente usando javascript o jquery. Muchas gracias

Answer 1

¿Así que desea copiar texto de un TextArea (que se representa como un control de input , por cierto) 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

Este trabajo funciona CodeMirror 5.22.0:

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

Answer 3

La última versión lanzada en el momento (v 3.15) funciona 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 4

La gestión de cambios en el espejo de código no es así:

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

tienes que usar

$.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 5

Pase una opción onChange a CodeMirror que se parece a esto:

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

Editado para tener en cuenta: desde la versión 2.0 de CodeMirror, ya no se pasa una opción onChange para registrar un controlador de cambios, sino que se llama instance.on("change", function(cm, change) { ... }) . http://codemirror.net/doc/manual.html#event_change

Answer 6

Puedes usar esto ...

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

Y editor_js.getValue() datos con editor_js.getValue()