[待完善]一个用DIV做容器的用于OA中公文修改留痕的编辑器


下面是所有代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DIV容器在线编辑 修改痕迹</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css"> 
<!-- 
#Composition{
BORDER-RIGHT: #fff 2px inset;
PADDING-RIGHT: 5px;
BORDER-TOP: #fff 2px inset;
PADDING-LEFT: 5px;
color: #000000;
BACKGROUND: white;
PADDING-BOTTOM: 5px;
OVERFLOW: auto;
BORDER-LEFT: #fff 2px inset;
PADDING-TOP: 5px;
BORDER-BOTTOM: #fff 2px inset
}
</STYLE>
</head>
<base target="_self">
<base href="http://info.diyuan.com:81/coop/">
<body bgcolor="lightgrey"><TABLE width="100%">
<TR>
<TD>
<table width="770" cellspacing="2" cellpadding="2" border="0"  bgcolor="lightgrey">
<tr>
<td>
<input type="button" id="stat" value="留痕" onClick="Modify()"></input>
<input type="button" value="完成" onClick="finish()"></input>
<input type="button" value="载入演示文档" onClick="reload()"></input>
</td>
</tr>
<tr>
<td>
<a href="javascript:bold()"><img src="images/bold.gif" border="0" alt="粗体"></a>
<a href="javascript:italicize()"><img src="images/italic.gif" border="0" alt="斜体"></a>
<a href="javascript:underline()"><img src="images/underline.gif" border="0" alt="下划线"></a>
<img src="images/space.gif" border="0">
<a href="#" onclick="document.execCommand('Undo')"><img src="images/undo.gif" border="0" alt="撤消"></a>
<a href="#" onclick="document.execCommand('Redo')"><img src="images/redo.gif" border="0" alt="重做"></a>
<img src="images/space.gif" border="0">
<a href="javascript:cutr()"><img src="images/cut.gif" border="0" alt="剪切"></a>
<a href="javascript:copyr()"><img src="images/copy.gif" border="0" alt="复制"></a>
<a href="javascript:paster()"><img src="images/paste.gif" border="0" alt="粘贴"></a>
</td>
</tr>
<tr>
<td>
<div ID="Composition" name="Composition" style="WIDTH: 100%; HEIGHT: 256px">在线编辑器</div>
</td>
</tr>
</table>  
</TD>
</TR>
<TR>
<TD>
<FORM METHOD="POST" ACTION="">
<TEXTAREA name="html" ROWS="8" COLS="106"></TEXTAREA>
</FORM>
</TD>
</TR>
</TABLE>
<script>
var IsModify = false;  //全局变量  是否保留痕迹
var Mdrag = false;  //全局变量  拖动操作标志
var username = "admin";   //全局变量  当前操作用户名
//var nowtime =  ;  //全局变量  当前时间
var selelen = 0;  //全局变量  记录被选择字符个数 用于控制光标位置
var editor = Composition;editor.contentEditable = "true";if (editor.contentEditable == "true"){
editor.onkeydown = KeyDown;    //键盘按键触发
// Composition.onmousedown = MouseDown;   //鼠标按键触发
// Composition.onkeypress = KeyPress;     //键盘 字面触发
Composition.ondragstart = Mousedragstar;   //文章内容 拖拽开始
Composition.ondragend = Mousedragend;        //文章内容 拖拽结束
}function bold(){
if (getSelectedText()) document.execCommand('Bold');
}function italicize(){
if (getSelectedText()) document.execCommand('Italic');
}function underline(){
if (getSelectedText()) document.execCommand('Underline');
}function cutr(){
if (getSelectedText()){
if (!IsModify){
document.execCommand('Cut');
}else{
alert("另外的函数处理剪切事件！");
}
}else{
alert("请先选择要剪切的文字！");
}
}function copyr(){
if (getSelectedText()) document.execCommand('Copy');
}function paster(){
if (!IsModify){
document.execCommand('Paste');
}else{
alert("另外的函数处理粘贴事件！");
}
}
function Mousedragstar(){
if (IsModify){
// alert("开始拖");
Mdrag = true;  //标记拖拽操作状态真
}
}
function Mousedragend(){
if (IsModify&&Mdrag){
// alert("结束拖");
Mdrag = false;  //标记拖拽操作状态假
}
}function KeyDown(){  //键盘按键触发
if (!IsModify) return;  //如果不是留痕状态不处理
  var ieKey = event.keyCode;
switch(ieKey){
  case 46:   //Delete key
// alert("按了DEL");
del_keydown();
break;
  case 8:    // BackSpace Key
// alert("按了退格键");
back_keydown();
break;
  case 32:   //Space Key
// alert("按了空格键");
event.returnValue=false;
break;
  case 88:   //Ctlr + x
   break;
  case 86:   //Ctlr + v
   break;
  }
//alert(ieKey);
// event.returnValue=false;  //屏蔽按键
}function KeyPress(){  //字面触发
if (!IsModify) return;
inputChinese();
}/////////////////////////////////////////////////////
function back_keydown(){  //退格键处理
event.keyCode=0;
event.returnValue=false;  //屏蔽键操作if (getSelectedText()){   //是否有文字被选择
txtdel(document.selection.createRange());     //标记被选择的文本}else{ //否则脚本选择光标前第的1个字
txtdel(crxq(true)); //选择光标前1个字符后增加标记
}
var rng = document.selection.createRange();
rng.moveStart("character",-selelen);   //改完后光标向前移动一个位置
rng.collapse(true); 
rng.select(); 
}function del_keydown(){  //退格键处理
event.keyCode=0;
event.returnValue=false;  //屏蔽键操作if (getSelectedText()){   //是否有文字被选择
txtdel(document.selection.createRange());
}else{ //否则脚本选择光标前第的1个字
txtdel(crxq(false));
}
}
//-------------------标签操作-------------------function inputChinese(){
    var sel = document.selection.createRange();
    if(sel.parentElement().className != "add"){
       sel.pasteHTML("<add title=\"" + username + " 2006-08-01 添加\" class=\"addtxt\">&nbsp;</add>");
        sel.moveStart("character",-1);
        sel.select();
    }
}function crxq(weizhi){  //创建选区
editor.focus(); //置编辑区焦点
var edit1 = document.selection.createRange();   //光标当前位置
var trg1 = document.body.createTextRange(); //创建选区
trg1.moveToPoint(edit1.offsetLeft,edit1.offsetTop);
if (weizhi){    //weizhi真值就向前选一个字，反之向后
trg1.moveStart("character",-1);
trg1.moveEnd("character",0);
}else{
trg1.moveStart("character",0);
trg1.moveEnd("character",1);
}
trg1.select();
selelen = 1;
return document.selection.createRange();
}function txtadd(){  //标记文档为新增

}
///////////////////////////////////////////////////////////////function txtdel(strRNG){  //标记文档为删除
strHTML = "<del id=ins1 title='" + username + " 2006-08-01 删除' style='color:red'>" + strRNG.text + "</del>";
strRNG.pasteHTML(strHTML);
}function sleft(){  //向前搜标签

}function sleft(){  //向后搜标签

}function getSelectedText() {  //获取被选择文字
var selected = '';
var sel = document.selection;
var rng = sel.createRange();
rng.colapse;
if((sel.type == "Text" || sel.type == "None") && rng != null){
if(rng.text.length > 0) selected = rng.text;
}
selelen = rng.text.length;
return selected;
}
</script><script>
function Modify(){
  if(IsModify){
    stat.value = "留痕";
    IsModify = false;
  }
  else{
    stat.value = "不留痕";
    IsModify = true;
  }
  Composition.focus();
}function finish(){  //完成时复制编辑结果
document.forms[0].html.value=Composition.innerHTML;
}function reload(){  //开始时的实例文章
Composition.innerHTML = "《福尔摩斯探案集》里的“苏格兰场”在?   英国 <br>世界上最长的山脉      安第斯山<br>文学史上魔幻现实主义代表人物   马尔克斯<br>最早的四冲内燃机是用什么燃料？  煤气<br>冻疮是由于身体的哪部分  毛细血管<br>反映波兰作曲家肖邦生平的美国影片是 一曲难忘<br>仰韶文化是我国历史上哪个时代中期的文化 新石器时代<br>俗称“黑管”是哪种木管乐器 单簧管<br>18世纪德国贵族热衷于收集并定制各种树木做的“木头书”,以木头做成的盒子,盒面用树皮制作,你知道盒子里面都用来装什么? : 树叶、果实等<br>古代女子成年行什么礼?  笄礼<br>世界上最深的湖在哪个国家? 俄罗斯<br>农历把每月初一叫做什么日?帖 答:朔日<br>国际奥委会为感谢萨马兰奇对奥林匹克运动的贡献,发行了一枚名为《感谢主席先生》的:纪念封 <br>中国古代哪个学派的主张,与绿色和平组织的思想相近?    道家";
}
</script></body>
</html>