Skip to content

Instantly share code, notes, and snippets.

@molarmanful

molarmanful/LICENSE.txt

Forked from 140bytes/LICENSE.txt
Last active August 29, 2015 14:24
Show Gist options
  • Save molarmanful/3e16d58abc1a4df47100 to your computer and use it in GitHub Desktop.
Save molarmanful/3e16d58abc1a4df47100 to your computer and use it in GitHub Desktop.
Download ZIP
HTML editor with live preview - 140byt.es
Raw
README.md

HTML Editor

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

Raw
annotated.js
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
}
Raw
index.js
a.oninput=function(){b.innerHTML=a.value}
Raw
LICENSE.txt
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.
Raw
package.json
{
"name": "HTMLEditor",
"description": "A simple editor with live preview.",
"keywords": [
"editor",
"html"
]
}
Raw
test.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