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!

Solution 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

Solution 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();
});

Solution 3

This works work CodeMirror 5.22.0:

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

Solution 4

onChange handling in code mirror is not like this :

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

you have to use :

$.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");
}

Solution 5

So you want to copy text from one TextArea (which renders as an input control, by the way) to another?

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

View more solutions