Real-time HTML Editor （实时网页编辑器）

有没有觉得（记事本 + 浏览器）编辑HTML很费劲，给大家推荐一个网页版的HTML编辑器。

特点：就像IDE一样所编即所得，实时显示效果；重要的是对于javascript脚本也是如此。

官网：http://htmledit.squarefree.com/

<!DOCTYPE html>
<html>
<head>
<title>Real-time HTML Editor</title>
<script type="text/javascript">

var editboxHTML = 
\'<html class="expand close">\' +
\'<head>\' +
\'<style type="text/css">\' +
\'.expand { width: 100%; height: 100%; }\' +
\'.close { border: none; margin: 0px; padding: 0px; }\' +
\'html,body { overflow: hidden; }\' +
\'<\/style>\' +
\'<\/head>\' +
\'<body class="expand close" onload="document.f.ta.focus(); document.f.ta.select();">\' +
\'<form class="expand close" name="f">\' +
\'<textarea class="expand close" style="background: #def;" name="ta" wrap="hard" spellcheck="false">\' +
\'<\/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.squarefree.com/" target="_top">Jesse Ruderman<\/a> and hosted by <a href="http://www.dreamhost.com/rewards.cgi?jesseruderman" target="_top">DreamHost<\/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();">
  <!-- about:blank confuses opera, so use javascript: URLs instead -->
  <frame name="editbox" src="javascript:\'\';">
  <frame name="dynamicframe" src="javascript:\'\';">
</frameset>

</html>