When I edit the code in a TextArea using CodeMirror how to reflect this into another textarea with js or jQuery

Question

The App: I have a textarea element in my page. It is transformed using CodeMirror, because I need to indent and highlight html code withing it. Pic is in the link: [textarea using codemirror]

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

Here is the code for textarea using 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> 

How to do it?: When I click Post button, all the code should be transmitted to another textarea. I need this to do with javascript or jQuery, but struggling how to do it. Any Help?

For the real world app the code in this textarea (from pic above) should affect the Html Designer API. i.e. Any changes in Html designer should be reflected in this textarea (which used codemirror for readability) and the opposite. When I edit in the textarea changes should be reflected in HtmlDesigner, but in this simulation case -> in the second textarea.

Example: like Visual Studio .Net WebPage Code Editor which has Designer + Source mode. Now it's clear?

I'm asking how to implement the mechanism described above using javascript or jquery. Thank you much!

Answer 1

Pass an onChange option to CodeMirror which looks something like this:

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

Edited to note: Since CodeMirror version 2.0, you don't pass an onChange option anymore to register a change handler, but call instance.on("change", function(cm, change) { ... }) instead. http://codemirror.net/doc/manual.html#event_change

Answer 2

Last released version at moment (v 3.15) works with this solution:

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