Real-time html editor | Hacker News Reader

Real-time html editor

htmledit.squarefree.com

This...really isn't that great. We've had editing with live preview for a while now, even with things like Markdown and WikiCreole. This doesn't even have any features like you would find in a programmers' editor like autoindent or inserting a tab/spaces if you press TAB. Also it uses frames.

It could be a satire, though.

You can't be serious in suggesting this is a satire. At worst, somebody created something that isn't as good as something else or somebody posted this to Hacker News not realizing there was a better alternative.

Which alternative(s) are you thinking of? From doing a quick Google search, http://www.htmlinstant.com seems a little nicer in that it includes some formatting buttons, but it isn't as fancy as what you described.

The OP's script can be refactored to half a line of JS. Not exactly HN worthy.

The author hasn't made any bold claims about its functionality or purpose. It is what it is.

This technique is explained here:

http://net.tutsplus.com/tutorials/html-css-techniques/how-to...

Now what would be really useful is if we built this live preview technique into SublimeText 2, maybe using the ST2 livereload plugin as a starting place:

https://github.com/dz0ny/LiveReload-sublimetext2

So it takes the text as input, and injects that into the frame below. A few times per second.

I'm wondering what the use cases for this are? Learning HTML basics?

I think http://jsfiddle.net/ does this and a lot more.

I think it probably updates on keydown, not several times per second.

> I think it probably updates on keydown, not several times per second.

This seems to be the relevant code (note that it calls update once every 150ms):

  function update()
  {
  var textarea = window.editbox.document.f.ta;
  var d = dynamicframe.document; 

  if (old != textarea.value) {
    old = textarea.value;
    d.open();
    d.write(old);
    if (old.replace(/[\r\n]/g,'') == defaultStuff.replace(/[\r\n]/g,''))
      d.write(extraStuff);
    d.close();
  }

  window.setTimeout(update, 150);
  }

One problem with this versus jsfiddle.net is that if your code shows an alert, it will show it again after every keydown.

back button broken

neat. source code? can we use it?

    setInterval(function(){$('div').html($('textarea').val())},150);

There you go, I'm releasing it under the WTFPL license.

Magic!

This is pretty cool. What are your plans to develop it further?

Would be really useful if I could plug a link into the top frame to debug HTML problems on live sites.

Like Firebug or the Chrome/Webkit based developer tools?

I already use those, but the simplicity of this appeals to me.

Reply on news.ycombinator.com