CodeMirror auto update iframe

CodeMirror auto update iframe

by Andy Blueman

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/mode/javascript/javascript.js"></script>
<div id="wrap"><textarea id="QTA1"></textarea><textarea id="QTA2"></textarea><textarea id="QTA3"></textarea><iframe id="godframe" src="about:blank"></iframe></div>

CSS

*, *:before, *:after {
    box-sizing: inherit;
    vertical-align: top;
}
html {
    box-sizing:border-box;
    width:100%;
    margin:0px;
    padding:0px;
}
body {
    width:100%;
    background-color:grey;
    margin:0px;
    padding:0px;
}
#wrap {
    width:100%;
    display:inline-block;
}
#text {
    width:50%;
}
.CodeMirror {
    display:inline-block;
    width:50%;
}
#godframe {
    display:inline-block;
    width:50%;
    border:0px solid red;
    background-color:white;
}

JavaScript

$(document).ready(function () {
    $('#godframe').contents().find('head').html("<style></style>");

});

var myCodeMirror = CodeMirror.fromTextArea(document.getElementById('QTA1'), {
    lineNumbers: true,
    matchBrackets: true
});

$(document).ready(function () {
    myCodeMirror.on('change', function () {
        var css = myCodeMirror.getValue();
        $('#godframe').contents().find('style').html(css);
    });
});


var myCodeMirror2 = CodeMirror.fromTextArea(document.getElementById('QTA2'), {
    lineNumbers: true,
    matchBrackets: true
});

$(document).ready(function () {
    myCodeMirror2.on('change', function () {
        html = myCodeMirror2.getValue();
        $('#godframe').contents().find('body').html(html);
    });
});

var myCodeMirror3 = CodeMirror.fromTextArea(document.getElementById('QTA3'), {
    lineNumbers: true,
    matchBrackets: true
});

$(document).ready(function () {
    myCodeMirror3.on('change', function () {
        html = myCodeMirror3.getValue();
        $('#godframe').contents().find('body').html(html);
    });
});