Live Updating HTML Editor
I got bored tonight and decided to write a quick self-updating HTML editor. At it’s core is a single JavaScript command which does the updating. This fires on the onKeyUp event of the textarea.
document.getElementById('preview').innerHTML = this.value;
It basically says “Make the HTML content of the ‘preview’ element contain the contents of me (the textbox in this case)”.
Uncategorized | GuruBob | 
July 17, 2007 10:56 pm
9 Comments
Other Links to this Post
RSS feed for comments on this post. TrackBack URI
Subscribe
By Nathan Kowald, July 18, 2007 @ 12:46 am
Very Cool!
What gave you this idea?
By Rodney, July 18, 2007 @ 7:23 pm
tis a beautiful thing!
By codenexus, July 18, 2007 @ 10:11 pm
Wow! Awesome work dude!
Now if you didn’t implement a style I think you may be able to over write it?? Currently (I could be doing it wrong) but you can’t use an inline style. Is this correct?
By codenexus, July 18, 2007 @ 11:57 pm
I take it back… seems to be working now. Weird!
By paul, July 20, 2007 @ 1:55 am
your so clever! lol, just kidding!
By codenexus, July 20, 2007 @ 10:14 pm
Actually it really needs to update the tags and colourize them on the fly in the edit box… then allow indenting by using the tab key… hmm how about spell checker and inbuilt validator… ummm that will do for the next 10 minutes…
lol!
By Guru, July 29, 2007 @ 1:50 pm
The innerHTML content of the div is updated, which is in the page itself, so any styles declared outside of the div will still apply to it. You could probably get around this by using an iframe and writing to it but I don’t know.
By Guru, July 29, 2007 @ 1:51 pm
Hi Nat … not sure what gave me the idea. I remember doing something similar ages ago so figure’d I’d post it to see what happened.
By Harrison Shen, March 20, 2008 @ 9:37 am
Very clever as you always are
The code is simple but to think in this way is not!