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

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

实现的JS代码如下:

完整可运行代码如下:你也可以修改代码后再运行.

<!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;
	width: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>

posted @ 2010-02-06 10:38 弹着钢琴设计阅读(1205) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

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

公告