Skip to content

Instantly share code, notes, and snippets.

@orioltf

orioltf/Plain_Text_Editor_with_preview_and_save_button.html

Created January 31, 2013 14:56
Show Gist options
  • Save orioltf/4683384 to your computer and use it in GitHub Desktop.
Save orioltf/4683384 to your computer and use it in GitHub Desktop.
Download ZIP
#BOOKMARK: Convert browser into a Plain Text Editor with live preview and save button
Raw
Plain_Text_Editor_with_preview_and_save_button.html
data:text/html;charset=utf-8,
<html>
<head>
<title>Plain Text Editor</title>
<style>
html{background-color: #f2f2f2;}
body{background-color: #fff; margin:0; font-size: 1rem; line-height: 1.4; background-color: rgba(0,0,0,0.1);}
pre {margin: 0; width: 38%; padding: 0 1em;}
iframe {border: none; width: 56%; background-color: #fff;}
pre, iframe {float: left; height: 100%;}
iframe body {margin: 0;}
</style>
</head>
<body>
<pre
onkeyup="(function(d,t){d[t]('iframe')[0].contentDocument.body.innerHTML = d[t]('pre')[0].textContent;})(document,'getElementsByTagName')"
id="txtBody"
autofocus
contenteditable></pre>
<iframe></iframe>
<button onClick="SaveTextArea()">Save</button>
<script>
function SaveTextArea() { window.location = "data:application/octet-stream," + escape(txtBody.textContent); }
var ifr = document.getElementsByTagName('iframe')[0];
function ResizeIfr() {ifr.style.height = document.body.offsetHeight;}
ifr.contentDocument.body.style.margin = 0;
ResizeIfr();
window.onresize = function(event) {ResizeIfr();}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment