Skip to content

Instantly share code, notes, and snippets.

@Awilum

Awilum/Editor with Preview

Created August 2, 2013 13:31
Show Gist options
  • Save Awilum/6139895 to your computer and use it in GitHub Desktop.
Save Awilum/6139895 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Editor with Preview
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Editor with Preview</title>
<style type=text/css>
#editor {
width: 400px;
height: 300px;
border: 1px solid black;
}
#preview {
width: 400px;
height: 300px;
border: 1px solid black;
}
</style>
</head>
<body>
<h3>Editor</h3>
<textarea id="editor"></textarea>
<h3>Preview</h3>
<iframe id="preview"></iframe>
<script src="http://code.jquery.com/jquery.js"></script>
<script>
var delay;
editor = document.getElementById('editor');
$('#editor').keyup(function() {
clearTimeout(delay);
delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
var previewFrame = document.getElementById('preview');
var preview = previewFrame.contentDocument || previewFrame.contentWindow.document;
preview.open();
preview.write($('#editor').val());
preview.close();
}
setTimeout(updatePreview, 300);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment