Note: This site might seem inactive… That’s because it is. Don’t worry though, I’m still coding webpages and stuff! If you’re interested, I suggest you get a translator and head over to Qiwi; or you could just check the latest site we’ve been working on: Apotheek Goethals – Debrabandere. Enjoy!
Online HTML editor with real-time preview
Via del.icio.us I stumbled upon The Real-time HTML Editor™. This indeed is a cool little tool for experimenting with (X)HTML, though I found its code could be better. A couple of Bad Things it involves are frames, hard refreshes, and no semantics. Since live previews are commonly-used bits of JS in the world of weblogs, I figured this could be done better. And look: even I managed to create an online HTML editor with real-time preview and no hard refreshes! How cool is that? :)
Comments (10)
Listed below are the responses for this entry.
Wow! :D That’s just too kewl! To be really honest; the first one sucks donkey arse. I read about it on digg, but I can’t really understand why 859 people would actually like it that much. I mean, it doesn’t even work in Opera! :] And everybody loves Opera!
I like the sortable-colorized-row-table-thingy more ;)
To answer your question, it is VERY cool.
Frames give you isolation, which is nice if you’re testing scripts or layout CSS. Using
innerHTML(like your version does) prevents scripts from running at all. Your version makes resizing impossible; frames give my version resizability for free.I’m not sure what you mean by “hard refreshes” and “no semantics”.
You should use
oninputinstead ofonkeydown.onkeydowndoesn’t fire when you paste by right-clicking and selecting “Paste”, for example.Fair enough. I guess resizability could be added to my implementation through some spiffy liquid CSS design l33tage though.
height: 50%;, anyone? Oh, and by the way, scripts can in fact be run — you just need to call them from insideonclickattributes, e.g.<a href="http://foo.bar/" onclick="alert('Seriously, you really intend to visit foo.bar?! Alright, go ahead…');">foo.bar</a>I know that might sound like a weak argument, but I just couldn’t resist mentioning it as you said (emphasis mine). Similarly, CSS can be added inline as well, e.g.
<a href="http://foo.bar/" style="color: #fec; text-transform: uppercase; background: #000; padding: 4px 1px; text-decoration: none;">foo.bar</a>. Indeed not a very semantical way of inserting JS/CSS, but then again it’s just a tool for testing new stuff, right?Your tool refreshes the bottom frame by every keystroke made. By the time you’ve entered
<html>, that’s six refreshes! I suppose it’s better to reload an in-pagedivthan to reload an entire page.As for the “no semantics” comment, I was referring to HTML such as
<body class="expand close" onload="update(); document.f.ta.select();">. Indeed, the kind of code you’d enter into my crappy editor ;)I tried your suggestion, but
oninputdidn’t seem to trigger anything.oninputworks for me in Firefox 1.5 Beta 1. What browser are you using?Firefox 1.5 Beta 1. All I do is replace the line saying
inputTextarea.onkeydown = hp_update;withinputTextarea.oninput = hp_update;, but it doesn’t quite seem to work. Perhaps I need to tweak something else in the code as well?Try using
addEventListener(). See Bug 195696: Setting textbox.oninput has no effect.Cool. I haven’t looked at the code for either, but I actually found Jesse’s more usable. Yours is always a character behind… and I like how the frame allows me to size each pane.
But the not-so-semantic use of the
H3element in his example text is a bad example… Mathias’s is styled prettier :)They are both neat and inspiring.
Your solution doesn’t seem to support the body tag and CSS, unlike the Squarefree version.
Have you tried this one?
HTML Editor with Live Preview
Made by me, of course, but well worth a try.