Bước tới nội dung

Sách mả nguồn Javascript/Trình soạn HTML

Tủ sách mở Wikibooks

<!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: 1; 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 = '

Welcome to the real-time HTML editor!<\/h3>\n' + '

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 = '

\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" cols="50%,*" onload="init();">

 <frame name="editbox" src="javascript:;">
 <frame name="dynamicframe" src="javascript:;">

</frameset>

</html>