Skip to content

Instantly share code, notes, and snippets.

@molarmanful
Forked from 140bytes/LICENSE.txt
Last active August 29, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save molarmanful/3e16d58abc1a4df47100 to your computer and use it in GitHub Desktop.
Save molarmanful/3e16d58abc1a4df47100 to your computer and use it in GitHub Desktop.
HTML editor with live preview - 140byt.es

HTML Editor

A simple editor that contains live preview. You can find the demo here.

a.oninput = function(){ //attach keyup event handler to textarea
b //equivalent to document.getElementById('b')
.innerHTML = a.value //update live preview to match textarea code
}
a.oninput=function(){b.innerHTML=a.value}
DO WHAT YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2015 Benjamin Pang <molarmanful.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT YOU WANT TO.
{
"name": "HTMLEditor",
"description": "A simple editor with live preview.",
"keywords": [
"editor",
"html"
]
}
<!DOCTYPE html>
<title>HTML Editor</title>
HTML:
<br>
<textarea rows="12" cols="100" style="font-family:monospace" id="a"></textarea>
<br>
<br>
Output:
<hr>
<div height="100%" width="100%" id="b"></div>
<script>
a.oninput=function(){b.innerHTML=a.value}
</script>
@atk
Copy link

atk commented Jul 6, 2015

As your friendly caddy, let me save you another 3 bytes:

d=document,(t=d[q='querySelector']('textarea')).onkeyup=function(){d[q]('div').innerHTML=t.value}

@molarmanful
Copy link
Author

@atk Wow, never thought of that. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment