Sách mả nguồn Javascript/Trình soạn HTML
<!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 = '
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>