登 录
实现的JS代码如下:
完整可运行代码如下:你也可以修改代码后再运行.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>文本编辑器</title><br /> <style type="text/css"><br /> #td_btns td{<br /> text-align: center;<br /> height:28px;<br /> width:28px;<br /> }<br /> #td_btns img{<br /> background-color:#ccc;<br /> border:1px solid #b0b0b0;<br /> cursor:pointer;<br /> }<br /> </style><br /> <script type="text/javascript"><br /> //初始化编辑器<br /> function initDocument(){<br /> var editor_bodyTag="<html><head></head><body bgcolor='#ffffff'></body></html>";<br /> //获取iframe对象。<br /> var editor=document.getElementById("editor_position").contentWindow;<br /> /*设置编辑器的设计模式。默认为”off“，表示文档不可编辑;设置成”on“即为可编辑的*/<br /> editor.document.designMode="on";<br /> editor.document.open();<br /> editor.document.write(editor_bodyTag);<br /> editor.document.close();<br /> //设置编辑器的编码方式。这里设置成中文<br /> editor.document.charset="gb2312";<br /> //这句代码对IE没用.主要是针对FF,修正FF的初始化光标位置偏上<br /> editorFormat("justifyleft");<br /> }<br /> //功能函数,执行命令<br /> function editorFormat(what,opt){<br /> var editor=document.getElementById("editor_position").contentWindow;<br /> if(opt==null){<br /> try{<br /> editor.document.execCommand(what,false,null);<br /> }catch(e){//错误处理<br /> alert("Error-line:36");<br /> }<br /> }else{<br /> try{<br /> editor.document.execCommand(what,"",opt);<br /> }catch(e){<br /> alert("error-line:42");<br /> }<br /> }<br /> editor.focus();<br /> }<br /> //初始化按钮,当mouseover,mouseout时有效果<br /> function initFormat(){<br /> var editor=document.getElementById("editor_position").contentWindow;<br /> var aImgs=document.getElementById("td_btns").getElementsByTagName("img");<br /> for(var i=0;i<aImgs.length;i++){<br /> aImgs[i].onmouseover=function(){<br /> this.style.padding="2px";<br /> editor.focus();<br /> }<br /> aImgs[i].onmouseout=function(){<br /> this.style.padding="0px";<br /> }<br /> if(i<4){//bold,italic,underline,throughline<br /> aImgs[i].value=false;<br /> aImgs[i].onclick=function(){<br /> if(this.value){<br /> this.value=false;<br /> this.style.backgroundColor="#ccc";<br /> this.style.border="1px solid #b0b0b0";<br /> }else{<br /> this.value=true;<br /> this.style.backgroundColor="#ddd";<br /> this.style.border="1px inset #b0b0b0";<br /> }<br /> }<br /> }else if(i==4){//清除(bold,italic,underline,throughline)的格式<br /> aImgs[i].onclick=function(){<br /> for(var j=0;j<4;j++){<br /> aImgs[j].value=false;<br /> aImgs[j].style.backgroundColor="#ccc";<br /> aImgs[j].style.border="1px solid #b0b0b0";<br /> }<br /> }<br /> }else if(i>4 &&i<8){<br /> aImgs[i].onclick=function(){<br /> for(var j=5;j<8;j++){<br /> aImgs[j].style.backgroundColor="#ccc";<br /> aImgs[j].style.border="1px solid #b0b0b0";<br /> }<br /> this.style.backgroundColor="#ddd";<br /> this.style.border="1px inset #b0b0b0";<br /> }<br /> }<br /> }<br /> }<br /> window.onload=function(){<br /> initDocument();<br /> initFormat();<br /> var editor=document.getElementById("editor_position").contentWindow;<br /> //获取按键事件的方法1<br /> if(document.all){//IE<br /> editor.document.attachEvent("onkeydown",keyPress1);<br /> }else{//other<br /> editor.document.addEventListener("keydown",keyPress1,false)<br /> }<br /> //获取按键事件的方法2<br /> /*editor.document.body.onkeypress=function(){<br /> var editor=document.getElementById("editor_position").contentWindow;<br /> return keyPress2(editor.event);<br /> }*/</p> <p>}<br /> //对应于按键事件方法1<br /> function keyPress1(event){<br /> //当按下TAB键时,通过取消默认事件,并动态输入四个\t来实现TAB键缩进.<br /> if(event.keyCode==9){<br /> //取消默认事件<br /> if(document.all){//IE<br /> event.returnValue=false;<br /> }else{//other(FF)<br /> event.preventDefault();<br /> }<br /> var editor=document.getElementById("editor_position").contentWindow;<br /> if(document.all){//IE<br /> var rng=editor.document.selection.createRange();<br /> rng.text="\t\t\t";<br /> //rng.collapse(false);<br /> //rng.select();<br /> }else{//FF<br /> var range=document.createRange();<br /> range.text="ok";<br /> var rng=editor.window.getSelection();<br /> if(rng.rangeCount>0)rng.removeAllRanges();<br /> rng.text="dovapour";<br /> }<br /> }<br /> }<br /> /*<br /> IE中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键.<br /> FF中:keypress事件的keyCode=0; keyup和keydown事件的keyCode不能区分大小写,能识别功能键.<br /> Chrome中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键.<br /> */</p> <p>//对应于按键事件方法2<br /> function keyPress2(ev){<br /> alert(ev.keyCode);<br /> }<br /> </script><br /> </head></p> <p><body><br /> <table style="background-color:#ccc;" cellpadding=0 cellspacing=5 border=0 ><br /> <tr><br /> <td><br /> <table id="td_btns"><br /> <tr><br /> <td id="bold_td" title="加粗" onclick="editorFormat('bold');"><br /> <img src="testImages/bold.gif" width="16" height="16" /><br /> </td></p> <p> <td title="斜体" onclick="editorFormat('italic');"><br /> <img src="testImages/italic.gif" width="16" height="16" /><br /> </td></p> <p> <td title="下划线" onclick="editorFormat('underline');"><br /> <img src="testImages/underline.gif" width="16" height="16" /><br /> </td></p> <p> <td title="删除线" onclick="editorFormat('strikethrough');"><br /> <img src="testImages/strikethrough.gif" width="16" height="16" /><br /> </td></p> <p> <td title="取消格式" onclick="editorFormat('removeformat');"><br /> <img src="testImages/removeformat.gif" width="16" height="16" /><br /> </td></p> <p> <td title="左对齐" onclick="editorFormat('justifyleft');"><br /> <img src="testImages/aleft.gif" width="16" height="16" /><br /> </td></p> <p> <td title="中间对齐" onclick="editorFormat('justifycenter');"><br /> <img src="testImages/acenter.gif" width="16" height="16" /><br /> </td></p> <p> <td title="右对齐" onclick="editorFormat('justifyright');"><br /> <img src="testImages/aright.gif" width="16" height="16" /><br /> </td></p> <p> </tr><br /> </table><br /> </td><br /> </tr><br /> <tr height="4"><td></td></tr><br /> <tr height="400"><br /> <td valign="top"><iframe ID="editor_position" marginheight="0" style="word-break:break-all; width:640px; overflow:hidden;" marginwidth="0" hspace="0" width="640" height="400"></iframe><br /> </td><br /> </tr><br /> </table><br /> </body><br /> </html><br /> 运行代码保存代码复制代码
抱歉!评论已关闭.