<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<div id="wrap">
<!-- Code Editors -->
<section id="code_editors">
<div id="html" class="code_box">
<h3>HTML</h3>
<textarea name="html"></textarea>
</div>
<div id="css" class="code_box">
<h3>CSS</h3>
<textarea name="css"></textarea>
</div>
<div id="js" class="code_box">
<h3>JavaScript</h3>
<textarea name="js"></textarea>
</div>
</section>
<!-- Sandboxing -->
<section id="output">
<iframe></iframe>
</section>
</div>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<!-- For HTML/XML -->
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<!-- For CSS -->
<script src="http://codemirror.net/mode/css/css.js"></script>
<!-- For JS -->
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
* {
* {
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%; height: 100%;
}
#wrap {
width: 100%;
height: 100%;
}
/* Code Editors */
#code_editors {
position: absolute;
top: 0; left: 0; bottom: 0; right: 60%;
}
#code_editors .code_box {
height: 33%; width: 100%;
position: relative;
}
.code_box h3 {
font-size: 13px;
height: 30px;
padding: 5px 10px; margin: 0;
background: linear-gradient(#707070, #555);
color: white;
border-top: 1px solid #8F8F8F;
border-bottom: 1px solid #202020;
}
.code_box textarea {
position: absolute;
left: 0; right: 0; top: 30px; bottom: 0;
resize: none; border: 0;
padding: 10px;
font-family: monospace;
}
.code_box textarea:focus {
outline: none;
background: #EFEFEF;
}
/* Output Area */
#output {
position: absolute;
left: 40%; top: 0; right: 0; bottom: 0;
border: 5px solid #444;
border-left-width: 10px;
overflow: hidden;
}
#output iframe {
width: 100%; height: 100%;
border: 0;
}
(function() {
(function() {
// Base template
var base_tpl =
"<!doctype html>\n" +
"<html>\n\t" +
"<head>\n\t\t" +
"<meta charset=\"utf-8\">\n\t\t" +
"<title>Test</title>\n\n\t\t\n\t" +
"</head>\n\t" +
"<body>\n\t\n\t" +
"</body>\n" +
"</html>";
var prepareSource = function() {
var html = html_editor.getValue(),
css = css_editor.getValue(),
js = js_editor.getValue(),
src = '';
// HTML
src = base_tpl.replace('</body>', html + '</body>');
// CSS
css = '<style>' + css + '</style>';
src = src.replace('</head>', css + '</head>');
// Javascript
js = '<script>' + js + '<\/script>';
src = src.replace('</body>', js + '</body>');
return src;
};
var render = function() {
var source = prepareSource();
var iframe = document.querySelector('#output iframe'),
iframe_doc = iframe.contentDocument;
iframe_doc.open();
iframe_doc.write(source);
iframe_doc.close();
};
// EDITORS
// CM OPTIONS
var cm_opt = {
mode: 'text/html',
gutter: true,
lineNumbers: true,
onChange: function (inst, changes) {
render();
}
};
// HTML EDITOR
var html_box = document.querySelector('#html textarea');
var html_editor = CodeMirror.fromTextArea(html_box, cm_opt);
// CSS EDITOR
cm_opt.mode = 'css';
var css_box = document.querySelector('#css textarea');
var css_editor = CodeMirror.fromTextArea(css_box, cm_opt);
// JAVASCRIPT EDITOR
cm_opt.mode = 'javascript';
var js_box = document.querySelector('#js textarea');
var js_editor = CodeMirror.fromTextArea(js_box, cm_opt);
// SETTING CODE EDITORS INITIAL CONTENT
html_editor.setValue('<p>Hello World</p>');
css_editor.setValue('body { color: red; }');
// RENDER CALL ON PAGE LOAD
// NOT NEEDED ANYMORE, SINCE WE RELY
// ON CODEMIRROR'S onChange OPTION THAT GETS
// TRIGGERED ON setValue
// render();
// NOT SO IMPORTANT - IF YOU NEED TO DO THIS
// THEN THIS SHOULD GO TO CSS
/*
Fixing the Height of CodeMirror.
You might want to do this in CSS instead
of JS and override the styles from the main
codemirror.css
*/
var cms = document.querySelectorAll('.CodeMirror');
for (var i = 0; i < cms.length; i++) {
cms[i].style.position = 'absolute';
cms[i].style.top = '30px';
cms[i].style.bottom = '0';
cms[i].style.left = '0';
cms[i].style.right = '0';
}
cms = document.querySelectorAll('.CodeMirror-scroll');
for (i = 0; i < cms.length; i++) {
cms[i].style.height = '100%';
}
}());