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>
运行代码
保存代码
复制代码
查看全文
相关阅读:
Atitti css transition Animation differ区别
Atitit 游戏引擎物理系统(1)爆炸效果
Atitit.rsa密钥生成器的attilax总结
新特性AAtitti css3 新特性attilax总结titti css
Atitit 异常的实现原理 与用户业务异常
Atitit.uke 团队建设的组织与运营之道attilax总结
atitit 业务 触发器原理. 与事件原理 docx
Atitit 基于dom的游戏引擎
Atitit 团队建设的知识管理
Javascript判断页面刷新或关闭的方法(转)
原文地址:https://www.cnblogs.com/pricks/p/1664831.html
最新文章
cpio格式的initrd解压与压缩
Fastboot的安装与使用
经营微博的十个经典案例 Leone
DEDECMS全站伪静态详细教程(首页、列表、文章页) Leone
19个带示例的jQuery滚动条插件 Leone
CentOS分区boot清理升级后的旧内核 Leone
满屏CSS自适应布局 Leone
CentOS 调整文件系统大小 Leone
MySQL存储过程详解 Leone
Javascript获取窗口(容器)的大小及位置 Leone
热门文章
javascript获取url参数parseUrl Leone
如何成为一名优秀的项目经理 Leone
Atitit 表达式原理 语法分析 原理与实践 解析java的dsl 递归下降是现阶段主流的语法分析方法
Atitit 在线支付系统功能设计原理与解决方案 与目录
Atitit.架构设计趋势 设计模式 微服务架构 soa
Atitit 订单处理原理与功能设计attilax总结
Atitit.异步的实现模式attilax大总结
Atitit dsl实现(1)异常的库模式实现 异常的ast结构
Atitit.编译原理与概论
Atitit.java图片图像处理attilax总结
Copyright © 2011-2022 走看看