CodeMirror breaks external preview JS function

#1

Hello, everyone.
I am working on a project that does not use the CodeMirror for the preview.
I am using the following code for doing live updates from the textarea to a div.
This works great and I need to continue using it.

<div id="parent">
 <div id="div1">
  <div id="textareacontainer">
    <div id="textarea">
        <div id="textareawrapper" style="border:1px double #000;">
<textarea autocomplete="off" id="textareaCode" wrap="logical" spellcheck="false">
<h1>Test</h1>
</textarea>
        </div>
    </div>
  </div>
 </div>
<div id="div2">
    <div id="result">test</div>
  </div>
</div>
<script type="text/javascript">//<![CDATA[
t = document.getElementById('textareaCode');
t.addEventListener('input',function(){
    document.getElementById('result').innerHTML = t.value;
});
  //]]></script>

This is a demo of the LIVE Edit from the above code.

However, when I add the CodeMirror syntax highlighting to the page, the live preview no longer functions.

<script>
var nonEmpty = false;
var editor = CodeMirror.fromTextArea(document.getElementById("textareaCode"), {
  mode: "application/xml",
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true
});
</script>

This is a demo of the CodeMirror added in, which breaks the Live Edit

Is there a way to use CodeMirror with the above JS code, or to I need to move on to some other type of Syntax for my textarea?

Thanks.

#2

An editor created with fromTextArea will not constantly update the original textarea, but you could add a change listener to the editor that calls .save() on it (possibly with a debounce) to keep the textarea value in sync.

#3

Hello, Marijn.
Could you possibly provide some code to go by?