有没有觉得(记事本 + 浏览器)编辑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" οnlοad="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>