Skip to content

Instantly share code, notes, and snippets.

@w3core

w3core/editor.html

Created July 11, 2016 17:37
Show Gist options
  • Save w3core/310fe1c3478e9e0c9f97105a77e6d157 to your computer and use it in GitHub Desktop.
Save w3core/310fe1c3478e9e0c9f97105a77e6d157 to your computer and use it in GitHub Desktop.
Download ZIP
Tiny code editor with preview
Raw
editor.html
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ext-language_tools.js"></script>
</head>
<body>
<style>
body{
margin: 0;
}
iframe,
textarea, .ace-monokai{
width: 100%;
float: left;
resize: none;
box-sizing: border-box;
margin: 0;
}
textarea, .ace-monokai{
height: 40vh;
font-family: monospace;
font-size: 11pt;
line-height: 1.4;
width: 33.33%;
}
.ace-monokai[placeholder]:before {
content: attr(placeholder);
position: absolute;
right: .5em;
color: #ccc;
z-index: 65535;
padding: 0 0 0 .5em;
font-weight: bold;
background: rgba(0,0,0,.8);
}
iframe {
height: 60vh;
border:0 none;
border-top:2px solid #2F3129;
}
</style>
<textarea id="h" placeholder="HTML"></textarea>
<textarea id="c" placeholder="CSS"></textarea>
<textarea id="j" placeholder="JS"></textarea>
<iframe></iframe>
<script>
var h = ace.edit("h");
h.setTheme("ace/theme/monokai");
h.getSession().setMode("ace/mode/html");
h.container.setAttribute("placeholder", "HTML");
h.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
var c = ace.edit("c");
c.setTheme("ace/theme/monokai");
c.getSession().setMode("ace/mode/css");
c.container.setAttribute("placeholder", "CSS");
c.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
var j = ace.edit("j");
j.setTheme("ace/theme/monokai");
j.getSession().setMode("ace/mode/javascript");
j.container.setAttribute("placeholder", "JS");
j.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
document.body.oninput = function(){
document.querySelector('iframe').srcdoc
= '<style>'+c.getValue()+'</style><script>'+j.getValue()+'<\/script>' + h.getValue()
}
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment