在线编辑器(4)TAB键缩进功能

zoukankan html css js c++ java

在线编辑器(4)TAB键缩进功能

利用IE的DHTML属性给编辑器增加了TAB键缩进功能.基本原理是:通过监听键盘的keydown事件,来取消浏览器默认事件,并在光标所在处增加"\t\t\t".来实现缩进上.

实现的JS代码如下:

window.onload=function(){
initDocument();
initFormat();
var editor=document.getElementById("editor_position").contentWindow;
//获取按键事件的方法1
if(document.all){//IE
  editor.document.attachEvent("onkeydown",keyPress1);
}else{//other
  editor.document.addEventListener("keydown",keyPress1,false)
}
//获取按键事件的方法2
/*editor.document.body.onkeypress=function(){
  var editor=document.getElementById("editor_position").contentWindow;
  return keyPress2(editor.event);
}*/

}
//对应于按键事件方法1
function keyPress1(event){
//当按下TAB键时,通过取消默认事件,并动态输入四个\t来实现TAB键缩进.
if(event.keyCode==9){
  //取消默认事件
  if(document.all){//IE
   event.returnValue=false;
  }else{//other(FF)
   event.preventDefault();
  }
  var editor=document.getElementById("editor_position").contentWindow;
  if(document.all){//IE
   var rng=editor.document.selection.createRange();
   rng.text="\t\t\t";
   //rng.collapse(false);
   //rng.select();
  }else{//FF
   var range=document.createRange();
   range.text="ok";
   var rng=editor.window.getSelection();
   if(rng.rangeCount>0)rng.removeAllRanges();
   rng.text="dovapour";
  }
}
}
/*
IE中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键.
FF中:keypress事件的keyCode=0; keyup和keydown事件的keyCode不能区分大小写,能识别功能键.
Chrome中:keypress事件的keyCode能区分大小写,但不能识别功能键(Ctr,Shift,Alt等); keyup和keydown事件的keyCode不能区分大小写,能识别功能键.
*/

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

查看全文

相关阅读:
Windows系统批处理命令实现计划关机
 Git如何将本地test分支设置跟踪origin/test分支
 JavaScript动态实现div窗口弹出&消失功能
 深入理解 Array.prototype.map()
JS中集合对象(Array、Map、Set)及类数组对象的使用与对比
 Vue的移动端多图上传插件vue-easy-uploader
如何开发一个npm包并发布
 emlog编辑器探寻之旅
 linux下安装nginx
原生JavaScript中动画与特效的实现原理

原文地址：https://www.cnblogs.com/pricks/p/1664831.html