每个人生下来都是天使，不过这个世界上也存在着恶魔。恶魔是天使变的，因为这个世界充满了诱惑。
本文摘自：http://lucky.diy.myrice.com/javascriptexam/htmleditor/editor/editor.htm <html> <head> <title>HTML 编辑器</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body,td,button,input {font-family:细明体;font-size:12px;} div {border:1px solid #d9cec4;borderColor:#ffffff;background:#d9cec4;width:24px;height:20px;text-align:center;cursor:default;} .function {width:80px;} </style> <script> function BtnOver(btn){ btn.style.borderTopColor="#efece8"; btn.style.borderBottomColor="#888070"; btn.style.borderLeftColor="#efece8"; btn.style.borderRightColor="#888070"; } function BtnClick(btn){ btn.style.borderTopColor="#888070"; btn.style.borderBottomColor="#efece8"; btn.style.borderLeftColor="#888070"; btn.style.borderRightColor="#efece8"; } function BtnOut(btn){ btn.style.borderColor="#d9cec4"; } function doCut(){ doc.execCommand('Cut'); Editor.focus(); } function doCopy(){ doc.execCommand('Copy'); Editor.focus(); } function doPaste(){ doc.execCommand('Paste'); Editor.focus(); } function doUndo(){ doc.execCommand('Undo'); Editor.focus(); } function doDelete(){ doc.execCommand('Delete'); Editor.focus(); } function doFontName(fn){ doc.execCommand('FontName', false, fn); Editor.focus(); } function doFontSize(fs){ doc.execCommand('FontSize', false, fs); Editor.focus(); } function doBold(){ doc.execCommand('Bold'); Editor.focus(); } function doItalic(){ doc.execCommand('Italic'); Editor.focus(); } function doUnderline(){ doc.execCommand('Underline'); Editor.focus(); } function doStrikeThrough(){ doc.execCommand('StrikeThrough'); Editor.focus(); } function doSubscript(){ doc.execCommand('Subscript'); Editor.focus(); } function doSuperscript(){ doc.execCommand('Superscript'); Editor.focus(); } function doJustifyLeft(){ doc.execCommand('JustifyLeft'); Editor.focus(); } function doJustifyRight(){ doc.execCommand('JustifyRight'); Editor.focus(); } function doJustifyCenter(){ doc.execCommand('JustifyCenter'); Editor.focus(); } function doIndent(){ doc.execCommand('Indent'); Editor.focus(); } function doOutdent(){ doc.execCommand('Outdent'); Editor.focus(); } function doForeColor(){ var fcolor=showModalDialog("editor_color.htm",false,"dialogWidth:106px;dialogHeight:126px;status:0;"); doc.execCommand('ForeColor',false,fcolor); Editor.focus(); } function doBackColor(){ var bcolor=showModalDialog("editor_color.htm",false,"dialogWidth:106px;dialogHeight:126px;status:0;"); doc.execCommand('BackColor',false,bcolor); Editor.focus(); } function doInsertTable(){ var dotable=showModalDialog("editor_table.htm",false,"dialogWidth:200px;dialogHeight:156px;status:0;"); if (dotable!=undefined){ doc.body.innerHTML=doc.body.innerHTML+dotable; }else{ return false; } Editor.focus(); } function doInsertOrderedList(){ doc.execCommand('InsertOrderedList'); Editor.focus(); } function doInsertUnorderedList(){ doc.execCommand('InsertUnorderedList'); Editor.focus(); } function doCreateLink(){ doc.execCommand('CreateLink'); Editor.focus(); } function doInsertImage(){ Editor.focus(); doc.execCommand('InsertImage','xxx'); } function doInsertInputButton(){ Editor.focus(); doc.execCommand('InsertInputButton'); } function doInsertHorizontalRule(){ Editor.focus(); doc.execCommand('InsertHorizontalRule'); } function doInsertInputCheckbox(){ Editor.focus(); doc.execCommand('InsertInputCheckbox'); } function doInsertInputRadio(){ Editor.focus(); doc.execCommand('InsertInputRadio'); } function doInsertInputText(){ Editor.focus(); doc.execCommand('InsertInputText'); } function doInsertInputPassword(){ Editor.focus(); doc.execCommand('InsertInputPassword'); } function doInsertInputSubmit(){ Editor.focus(); doc.execCommand('InsertInputSubmit'); ShowMessage(); } function doInsertInputReset(){ Editor.focus(); doc.execCommand('InsertInputReset'); ShowMessage(); } function doInsertMarquee(){ Editor.focus(); doc.execCommand('InsertMarquee'); ShowMessage(); } function doInsertSelectDropdown(){ Editor.focus(); doc.execCommand('InsertSelectDropdown'); } function doInsertTextArea(){ Editor.focus(); doc.execCommand('InsertTextArea'); } function doPrint(){ doc.execCommand('Print'); Editor.focus(); } function doSaveAs(){ doc.execCommand('SaveAs',0,"未命名"); Editor.focus(); } function doOpen(){ doc.execCommand('Open'); Editor.focus(); } function EditResource(){ Preview.value=doc.body.innerHTML; return false; } function ClearAll(){ doc.body.innerHTML=''; Preview.value=''; return false; } function SeePreview(){ doc.body.innerHTML=Preview.value; return false; } function AutoPreview(){ if(vx.checked){ SeePreview(); } } function EditMode(){ doc.designMode = "On"; window.setTimeout('SeePreview()',100); Preview.focus(); } function PreviewMode(){ doc.designMode = "Off"; window.setTimeout('SeePreview()',100); Preview.focus(); } function ShowMessage(){ alert("请按两下物件编辑内容"); } </script> </head> <body bgcolor=#e0e0e0 OnKeyUP="AutoPreview();"> <center> <table width=600 border=1 cellpadding=0 cellspacing=0 bordercolorlight=#888070 bordercolordark=#efece8> <tr><td bgcolor=#d9cec4><table border=0 cellpadding=0 cellspacing=1><tr> <td><img src=editor_h.gif></td> <td><div title="存档" onclick="doSaveAs();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f01.gif></div></td> <td><div title="列印" onclick="doPrint();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f02.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="剪下" onclick="doCut();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f03.gif></div></td> <td><div title="复制" onclick="doCopy();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f04.gif></div></td> <td><div title="贴上" onclick="doPaste();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f05.gif></div></td> <td><div title="删除" onclick="doDelete();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f06.gif></div></td> <td><div title="复原" onclick="doUndo();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f07.gif></div></td> </tr></table> </td></tr> <tr><td bgcolor=#d9cec4><table border=0 cellpadding=0 cellspacing=1><tr> <td><img src=editor_h.gif></td> <td><select onChange="doFontName(this[this.selectedIndex].value);this.selectedIndex=0;"> <option value="">字型 <option value="细明体">细明体 <option value="新细明体">新细明体 <option value="标楷体">标楷体 <option value="arial">arial <option value="wingdings">wingdings </select></td> <td><select onChange="doFontSize(this[this.selectedIndex].value);this.selectedIndex=0;"> <option value="">大小 <option value="1">1 <option value="2">2 <option value="3">3(预设) <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 </select></td> <td><img src=editor_s.gif></td> <td><div title="粗体字" onclick="doBold();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f08.gif></div></td> <td><div title="斜体字" onclick="doItalic();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f09.gif></div></td> <td><div title="划底线" onclick="doUnderline();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f10.gif></div></td> <td><div title="删除线" onclick="doStrikeThrough();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f11.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="上标字" onclick="doSuperscript();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f12.gif></div></td> <td><div title="下标字" onclick="doSubscript();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f13.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="文字颜色" onclick="doForeColor();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f14.gif></div></td> <td><div title="背景颜色" onclick="doBackColor();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f15.gif></div></td> </tr></table> </td></tr> <tr><td bgcolor=#d9cec4><table cellpadding=0 cellspacing=1><tr> <td><img src=editor_h.gif></td> <td><div title="靠左对 " onclick="doJustifyLeft();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f16.gif></div></td> <td><div title="靠中对 " onclick="doJustifyCenter();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f17.gif></div></td> <td><div title="靠右对 " onclick="doJustifyRight();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f18.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="增加缩排" onclick="doIndent();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f19.gif></div></td> <td><div title="减少缩排" onclick="doOutdent();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f20.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="数字标题" onclick="doInsertOrderedList();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f21.gif></div></td> <td><div title="无数字标题" onclick="doInsertUnorderedList();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f22.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="插入分隔线" onclick="doInsertHorizontalRule();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f23.gif></div></td> <td><div title="插入表格" onclick="doInsertTable();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f24.gif></div></td> <td><div title="插入连结" onclick="doCreateLink();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f25.gif></div></td> <td><div title="插入图片" onclick="doInsertImage();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f26.gif></div></td> <td><div title="跑马灯" onclick="doInsertMarquee();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f27.gif></div></td> </tr></table></td></tr> <tr><td bgcolor=#d9cec4><table cellpadding=0 cellspacing=1><tr> <td><img src=editor_h.gif></td> <td><div title="核取方块" onclick="doInsertInputCheckbox();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f28.gif></div></td> <td><div title="点选圆" onclick="doInsertInputRadio();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f29.gif></div></td> <td><div title="文字输入" onclick="doInsertInputText();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f30.gif></div></td> <td><div title="密码输入" onclick="doInsertInputPassword();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f31.gif></div></td> <td><div title="选单方块" onclick="doInsertSelectDropdown();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f32.gif></div></td> <td><div title="文字方块" onclick="doInsertTextArea();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f33.gif></div></td> <td><img src=editor_s.gif></td> <td><div title="自订按钮" onclick="doInsertInputButton();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f34.gif></div></td> <td><div title="送出按钮" onclick="doInsertInputSubmit();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f35.gif></div></td> <td><div title="重设按钮" onclick="doInsertInputReset();" onmouseover="BtnOver(this);" onmouseout="BtnOut(this);" onmousedown="BtnClick(this);" onmouseup="BtnOver(this);"><img src=editor_f36.gif></div></td> </tr></table></td></tr> <tr><td bgcolor=#d9cec4><table cellpadding=0 cellspacing=1><tr> <td><img src=editor_h.gif></td> <td><input title="编辑模式" type=radio name=vm onclick="EditMode();" checked></td><td><div title="编辑模式"><img src=editor_e.gif></div></td><td> </td> <td><input title="预览模式" type=radio name=vm onclick="PreviewMode();"></td><td><div title="预览模式"><img src=editor_p.gif></div></td> </tr></table></td></tr> <tr><td><iframe id="Editor" marginwidth=1 scrolling="auto" style="height:150px;width:100%;background-color:white;"></iframe></td></tr> <tr><td bgcolor=#d9cec4><table cellpadding=0 cellspacing=1><tr> <td><img src=editor_h.gif></td> <td><button class=function onclick="EditResource();Preview.focus();" id=mxh>编辑源代码</button></td> <td><button class=function onclick="ClearAll();Preview.focus();">全部清除</button></td> <td><button class=function onclick="SeePreview();Preview.focus();">结果预览</button></td> <td><img src=editor_s.gif></td> <td><input title="自动预览" type=checkbox name=vx onclick="AutoPreview();Preview.focus();" checked></td><td><div title="自动预览"><img src=editor_a.gif></div></td> </tr></table></td></tr> <tr><td><textarea id=Preview style="height:150px;width:100%;background-color:#ffffff;overflow=auto;"></textarea></td></tr> </table> </center> <script> var doc; doc=document.frames.Editor.document; doc.designMode = "On"; window.setTimeout('Editor.focus()',100); </script> </body> </html>
posted on 2005-12-09 17:14 hyamw 阅读(489) 评论(0) 收藏 举报
博客园 © 2004-2026 浙公网安备 33010602011771号 浙ICP备2021040463号-3
浙公网安备 33010602011771号