Using CodeMirror (readonly and editable code)

HTML

<link 
    rel="stylesheet" href="http://codemirror.net/lib/codemirror.css" />
<script src="http://codemirror.net/lib/codemirror.js"></script>
<script src="http://codemirror.net/addon/edit/matchbrackets.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>

<!--http://stackoverflow.com/questions/5725430/http-test-server-that-accepts-get-post-calls-->
<form method="POST" action="http://httpbin.org/post" >
    <h1>Sync CodeMirror and source textarea</h1>

    <textarea id="my-text" name="my-text" rows="4" cols="50" >
//Demo code (the actual new parser character stream implementation)
function StringStream(string) {
  this.pos = 0;
  this.string = string;
}</textarea>

    <button id="test" type="submit" >Test</button>
</form>

CSS

.CodeMirror {
    /*Auto-resize:
      https://codemirror.net/doc/manual.html#styling*/
    height: auto !important;
}

JavaScript

window.onload = function () {
    var text = document.getElementById('my-text');
    
    var editableCodeMirror = CodeMirror.fromTextArea(text, {
        mode: "javascript",
        theme: "default",
        lineNumbers: true,
    });
    //Manual syncing isn't needed for POST requests, 
    //but *is* needed if the <textarea> value is used client-side..
    //http://stackoverflow.com/a/18167210
    editableCodeMirror.on('change', function (cm) {
        text.value = cm.getValue();
    });
    
    //http://stackoverflow.com/questions/9506653/how-to-add-event-handlers-to-html-buttons-from-within-javascript-code
    document.getElementById('test').onclick = function () {
        console.log(text.value);
    };
};