Codemirror with live preview - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

  1. HOME
  2. Javascript
  3. CodeMirror
  4. Configuration

Description

Codemirror with live preview

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script> 
      <style id="compiled-css" type="text/css">

.CodeMirror {/*from   w  w  w  .j  av  a  2  s .  c om*/
   float: left;
   width: 100%;
   border: 1px solid black;
}
iframe {
   width: 100%;
   height: 400px;
   background-color:#F0F0F0;
   border:none;
   border-radius:4px;
}


      </style> 
      <script type="text/javascript">
    $(window).load(function(){
function loadCSS() {
    var $head = $("#preview").contents().find("head");
    $head.html("<style>" + editor.getValue() + "</style>");
};
var delay;
var editor = CodeMirror.fromTextArea(document.getElementById('code'), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true,
    mode: 'text/html'
});
editor.on("change", function() {
    clearTimeout(delay);
    delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
    loadCSS();
}
setTimeout(updatePreview, 300);
var delay2;

var editor2 = CodeMirror.fromTextArea(document.getElementById('codert'), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true,
    mode: 'text/html'
});
editor2.on("change", function() {
    clearTimeout(delay2);
    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();
    loadCSS();
}
setTimeout(updatePreview2, 300);
    });

      </script> 
   </head> 
   <body> 
      <link rel="stylesheet" href="https://codemirror.net/lib/codemirror.css"> 
      <script src="https://codemirror.net/lib/codemirror.js"></script> 
      <script src="https://codemirror.net/addon/edit/matchbrackets.js"></script> 
      <script src="https://codemirror.net/addon/edit/continuecomment.js"></script> 
      <script src="https://codemirror.net/mode/javascript/javascript.js"></script> 
      <div class="control-group"> 
         <label class="control-label" for="textarea2">Code</label> 
         <div class="controls"> 
            <textarea class="code" name="code" id="codert" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px">
abc
&lt;div class="bg"&gt;I have background.&lt;/div&gt;
def
</textarea> 
         </div> 
      </div> 
      <div class="control-group"> 
         <label class="control-label" for="textarea3">CSS</label> 
         <div class="controls"> 
            <textarea id="code" class="code" name="codeCSS" cols="40" rows="5" placeholder="Enter code here ..." style="width: 810px; height: 200px">
.bg {
    background: steelblue;
}
</textarea> 
         </div> 
      </div> 
      <div id="result"></div> 
      <iframe id="preview"></iframe>  
   </body>
</html>

Related Tutorials