在线编辑器(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>

查看全文

相关阅读:
Asp.Net Web API 2第八课——Web API 2中的属性路由
 Asp.Net Web API 2第七课——Web API异常处理
 Asp.Net Web API 2第六课——Web API路由和动作选择
 Asp.Net Web API 2第五课——Web API路由
 开始学习python
BMI 小程序购物车
 深浅copy 文件操作
 字典 dict 集合set
基本数据类型 (str,int,bool,tuple,)
python 运算符

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