title: CodeMirror with 2 text editors and live preview?
body: <p>I'm trying to create a live editor like jsfiddle where users can put html in <code>html box (textarea)</code> and css in <code>css box(textarea)</code> and preview the changes <em>live in an iframe</em>.</p>
  
  <p>I am using <code>codemirror</code> as the editor.</p>
  
  <p>So far I can only get the preview of one of the textareas in my iframe and I cannot figure out how to get the values of both textareas (css/html) and display them in my iframe exactly like jsfiddle.</p>
  
  <p>This is what I have so far:</p>
  
  <p><a href="http://jsfiddle.net/vwqgtznv/" rel="nofollow">http://jsfiddle.net/vwqgtznv/</a></p>
  
  <p>and this is my javascript code:</p>
  
  <pre><code>   &lt;script&gt;
        var delay;
        // Initialize CodeMirror editor with a nice html5 canvas demo.
        var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true,
          mode: 'text/html'
        });
        editor.on("change", function() {
          clearTimeout(delay);
          //alert("hellooooo");
  
  
  
          delay = setTimeout(updatePreview, 300);
        });
  
        function updatePreview() {
          var previewFrame = document.getElementById('preview');
          var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
          preview.open();
          preview.write(editor.getValue());
          preview.close();
        }
        setTimeout(updatePreview, 300);
      &lt;/script&gt;
  
          &lt;script&gt;
        var delay2;
        // Initialize CodeMirror editor with a nice html5 canvas demo.
        var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), {
      lineNumbers: true,
      styleActiveLine: true,
      matchBrackets: true,
          mode: 'text/html'
        });
        editor2.on("change", function() {
          clearTimeout(delay2);
          //alert("hellooooo");
  
  
  
          delay2 = setTimeout(updatePreview2, 300);
        });
  
        function updatePreview2() {
          var previewFrame2 = document.getElementById('preview');
          var preview2 =  previewFrame2.contentDocument ||  previewFrame2.contentWindow.document;
          preview2.open();
          preview2.write(editor2.getValue());
          preview2.close();
        }
        setTimeout(updatePreview2, 300);
      &lt;/script&gt;
  </code></pre>
  
  <p>could someone please help me out and advise on this issue?</p>
  
  <p>Thanks in advance.</p>