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()