Real-time HTML Editor

' + '

' + '

' +
'<\/textarea>' +
'<\/form>' +
'<\/body>' +
'<\/html>';

var defaultStuff = '<h3>Welcome to the real-time HTML editor!<\/h3>\n' +
'<p>Type HTML in the textarea above, and it will magically appear in the frame below.<\/p>';

// I don't want this stuff to appear in the box at the top because I feel it's likely to be distracting.
var extraStuff = '<div style="position:absolute; margin:.3em; bottom:0em; right:0em;"><small>\n  Created by <a href="http://www.rahulbasu.tk/" target="_top">Rahul Basu<\/a>.\n<\/small><\/div>';

var old = '';
         
function init()
{
  window.editbox.document.write(editboxHTML);
  window.editbox.document.close();
  window.editbox.document.f.ta.value = defaultStuff;
  update();
}

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);
}

</script>
</head>

<frameset resizable="yes" rows="50%,*" onload="init();">
  
  <frame name="editbox" src="javascript:'';">
  <frame name="dynamicframe" src="javascript:'';">
</frameset>

</html>