在线编辑器

<!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>editor</title>
<style type="text/css">
body{ font-size:12px;}
#ed{ height:300px; width:800px; background-color: }
.sssss{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090730/003356952.p.gif)}
.a1{ background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090730/003356952.p.gif);height:22px; display:inline-table;float:left; ;cursor: pointer; margin-top:8px; margin-left:5px; margin-right:2px; vertical-align:middle; line-height:20px;}
.ebody{ height:auto; width:760px; border:1px solid #999999}
.ebar{ width:100%; height:36px; background-color:#F0F2F5;};
.edit{ height:550px; width:100%; border:0px;}
.popupfont{ width:200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; }
a.c1{ width:96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c1:hover{width:96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c2{ width:96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c2:hover{width:96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c3{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;}
a.c3:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c4{ width:96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c4:hover{width:96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c5{ width:96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
a.c5:hover{width:96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c6{ width:96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c6:hover{width:96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.c7{ width:96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
a.c7:hover{width:96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
a.n{ width:96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; }
a.n:hover{width:96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
.textarea{ border:0px;display:none;}
.bottom{height:30px;width:100%;background-color:#F7F3F7;font-size:12px;}
.checkbox{margin-top:10px;margin-top/*/**/:6px/9;margin-left:20px;margin-left/*/**/:16px/9;}
.pp{height:auto; border:1px solid #D3D3D3; position:absolute;z-index:5;}
.ppt{
height:24px; width:100%; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090726/203207031.p.gif); font-size:12px; font-weight: bold; vertical-align:middle; line-height:24px;
}
</style>
</head>

<body>
<br>
<ul>
<li>支持B I U ,项目符号,编号  高亮</li>
<li>可以自己设置所需要的编辑项</li>
<li>兼容ie  ff chrome</li>
</ul>
<div id='ss'></div>
<br><br><br>
<div id='sss'></div>
<br><br><br>
<div id='ssss'></div>
<script>

var isIE = (document.all) ? true : false;

var isIE6 = isIE && ([/MSIE (/d)/.0/i.exec(navigator.userAgent)][0][1] == 6);
isIE6&&document.execCommand("BackgroundImageCache", false, true);


var $ = function (id) {
 return "string" == typeof id?document.getElementById(id):id;
};

var $$ = function(p,e){
 return p.getElementsByTagName(e);
}

var $c = function(elm){
 return document.createElement(elm);
}

function getTarget(e){
 e = e||window.event;
 return e.srcElement||e.target;
}

function createtab(tri,tdi,arisetab,arisetr,arisetd,p){
 var table = p?p.createElement("table"):$c("table");
 arisetab&&arisetab(table);
 var tbody = p?p.createElement("tbody"):$c("tbody");
 for(var i=0;i<tri;i++)
 {
   var tr = p?p.createElement("tr"):$c("tr");
   arisetr&&arisetr(i,tr);
   for(var j=0;j<tdi;j++)
   {
    var td = p?p.createElement("td"):$c("td");
    arisetd&&arisetd(i,j,td);
    tr.appendChild(td);
   }
   tbody.appendChild(tr);
 }
 table.appendChild(tbody);
 return table;
}

var Extendpro = function(e,o){
 for(var i in o)
 typeof o[i]!="object"?(e.style[i] = o[i]):(e[i] = o[i][0]);
}

var Extend = function(destination, source) {
 for (var property in source) {
  destination[property] = source[property];
 }
}

var Bind = function(object, fun,args) {
 return function() {
  return fun.apply(object,args||[]);
 }
}

var BindAsEventListener = function(object, fun,args) {
 var args = Array.prototype.slice.call(arguments).slice(2);
 return function(event) {
  return fun.apply(object, [event || window.event].concat(args));
 }
}

var CurrentStyle = function(element){
 return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

function getobjpos(el,left){
  var val = 0;
     while (el !=null) {
   val += el["offset" + (left? "Left": "Top")];
   el = el.offsetParent;
     }
     return val;
}

 function create(e,p,fn){
  var element = document.createElement(e); p.appendChild(element);fn&&fn(element);return element;
 }
 
 function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};
 
 function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};

 var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
 };
 
 var Editer = new Class({
  options:{
      width     :890,
   height    :700,
      facebg    : [
    {bgimg:"-4px -4px",title:"微笑",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220846596.p.gif"},{bgimg:"-31px -4px",title:"大笑",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220859814.p.gif"},{bgimg:"-58px -4px",title:"窃笑",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220911971.p.gif"},{bgimg:"-85px -4px",title:"眨眼",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"},{bgimg:"-112px -4px",title:"鬼脸",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220928549.p.gif"},{bgimg:"-139px -4px",title:"色色",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220951955.p.gif"},{bgimg:"-167px -4px",title:"暴牙",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220958111.p.gif"},{bgimg:"-194px -4px",title:"讨厌",wl:22,src:"http://album.hi.csdn.net/app_uploads/wtcsy/20090719/221004564.p.gif"}
   ],
      fontsizedata     : { fontSize:["字号1","字号2","字号3","字号4","字号5","字号6","字号7"],
         fontname:["宋体","黑体","楷体","隶书","幼圆","Arial","Georgia","Verdana","Helvetica"]
   },
   oninit:function(){}
  },
  initialize:function(container,b,options){
   this.data        = [
    {obj:null,bgimg:"-0px -57px",active:"-0px -28px",title:"加粗",width:22,cbg:"-0px -2px",action:"Exec",args:["bold",null],exist:true},
    {obj:null,bgimg:"-30px -57px",active:"-30px -28px",title:"斜体",width:22,cbg:"-30px -2px",action:"Exec",args:["Italic",null],exist:true},
    {obj:null,bgimg:"-58px -57px",active:"-58px -28px",title:"下划线",width:22,cbg:"-58px -2px",action:"Exec",args:["Underline",null],exist:true},
    {obj:null,bgimg:"-86px -57px",title:"字号",width:73,cbg:"-86px -57px",action:"Fontsize",args:[],exist:true},
    {obj:null,bgimg:"-86px -28px",title:"字体",width:73,cbg:"-86px -28px",action:"FontName",args:[],exist:true},
    {obj:null,bgimg:"-164px -57px",title:"文字颜色",width:22,bgcolor:"#000000",cbg:"-164px -2px",action:"Fontcolor",args:[],exist:true},
    {obj:null,bgimg:"-194px -57px",title:"插入链接",width:22,cbg:"-194px -2px",action:"CreateLink",args:[],exist:true},
    {obj:null,bgimg:"-45px -84px",title:"剪贴",width:22,cbg:"-45px -192px",action:"Exec",args:["Cut",null],exist:true},
    {obj:null,bgimg:"-76px -84px",title:"复制",width:22,cbg:"-76px -192px",action:"Exec",args:["Copy",null],exist:true},   
    {obj:null,bgimg:"-58px -140px",title:"左对齐",width:22,cbg:"-58px -247px",action:"Exec",args:["JustifyLeft",null],exist:true},
    {obj:null,bgimg:"-86px -140px",title:"居中对齐",width:22,cbg:"-86px -247px",action:"Exec",args:["JustifyCenter",null],exist:true},
    {obj:null,bgimg:"-113px -140px",title:"右对齐",width:22,cbg:"-113px -247px",action:"Exec",args:["JustifyRight",null],exist:true},
    {obj:null,bgimg:"-476px -84px",active:"-476px -299px",title:"项目符号",width:22,cbg:"-476px -192px",action:"Exec",args:["InsertUnorderedList",null],exist:true},
    {obj:null,bgimg:"-505px -84px",active:"-505px -299px",title:"编号",width:22,cbg:"-505px -192px",action:"Exec",args:["InsertOrderedList",null],exist:true},
    {obj:null,bgimg:"-333px -140px",title:"插入表格",width:22,cbg:"-333px -247px",action:"Addtable",args:[],exist:true},
    {obj:null,bgimg:"-532px -84px",title:"减少缩进",width:22,cbg:"-532px -192px",action:"Exec",args:["Outdent",null],exist:true},
    {obj:null,bgimg:"-560px -84px",title:"增加缩进",width:22,cbg:"-560px -192px",action:"Exec",args:["Indent",null],exist:true},
    {obj:null,bgimg:"-455px -140px",title:"清除样式",width:22,cbg:"-455px -247px",action:"Exec",args:["RemoveFormat",null],exist:true},
    {obj:null,bgimg:"-222px -57px",title:"插入图片",width:73,cbg:"-222px -2px",action:"InsertImage",args:[],exist:true},
    {obj:null,bgimg:"-380px -57px",title:"插入表情",width:74,cbg:"-380px -2px",action:"Expression",args:[],exist:true},
    {obj:null,bgimg:"-460px -57px",title:"自动排版",width:71,cbg:"-460px -2px",action:"Layout",args:[],exist:true}
   ];  
   this.container   = container; 
   this._body       = $c("div");   
   this.toolbar     = $c("div");     //工具栏
   this.iframe      = $c("iframe");  //编辑区
   this.bottom      = $c("div");     //底部
   this.textarea    = $c("textarea"); //显示源代码的框框
   this.lightbox    = b;             //lightbox
   this.original    = $c("input");   //显示源代码的按纽
   this.ed          = null;
   this.isfocus     = false;
   Extend(this.options,options||{});            

   this.fontsizedata= this.options.fontsizedata;   //字体数据源
   this.facebg      = this.options.facebg;         //表情数据源
   this.width       = this.options.width;          //编辑区的宽度
   this.height      = this.options.height;          //编辑区的高度
   this.oninit      = this.options.oninit;
   this.rang        = null;                        //选中区
   this.Fpop        = null;             
   this._body.appendChild(this.toolbar);
   this._body.appendChild(this.iframe);
   this._body.appendChild(this.textarea);
   this._body.appendChild(this.bottom);
   this.container.appendChild(this._body);
   this.oninit();
   var self  =  this ;
   this.toolbar.className   = "ebar";
   with(this._body){className = "ebody"; style.width = this.width+"px";style.height = this.height+"px";}
   with(this.textarea){ className = "textarea";style.width = isIE?this.width-2+"px":this.width+"px";style.height = isIE?this.height-66+"px":this.height-70+"px";}
   with(this.iframe){src = "about:blank";width =isIE?this.width:this.width-4;height=isIE?this.height-66:this.height-70; } 
   with(this.original){type = "checkbox";className="checkbox";align="top"};
   with(this.bottom){className   = "bottom";innerHTML   = "<span>显示源代码</span>";insertBefore(this.original,this.bottom.childNodes[0]);};
   this.ed=isIE?this.iframe.contentWindow.document:this.iframe.contentDocument;
   this.ed.open();
   var div = isIE?"<div></div>":"";
   this.ed.write("<html><head><style>body{margin:5px;font-size:16px;word-wrap:break-word}</style></head><body id='my_body'>"+div+"</body></html>");
   this.ed.close();
   with(this.ed){contentEditable = true;designMode = "on";}; //设置编辑区为可编辑
  
   for(var i = 0;i<this.data.length;i++)
   {
       if(!this.data[i].exist)continue;
    create("span",this.toolbar,function(o){
     with(o){
      className = "a1";style.backgroundPosition = self.data[i].bgimg;style.width = self.data[i].width+"px";title = self.data[i].title;active = false;
     }
     o.unselectable = "on";
     self.data[i].obj=o;
     if(self.data[i].bgcolor)o.style.backgroundColor = self.data[i].bgcolor;
     addListener(o,"mouseover",Bind(self,self.Changebgcolor,[o,self.data[i].cbg]));
     addListener(o,"mouseout",Bind(self,self.Changebgcolor,[o,self.data[i].bgimg]));
     addListener(o,"click",Bind(self,self[self.data[i].action],[o].concat(self.data[i].args)));   
    })
   }
   //生成工具栏
    addListener(this.iframe.contentWindow,"focus",function(){self.isfocus = true;});
    addListener(this.iframe.contentWindow,"blur",function(){self.isfocus  = false;});  
     addListener(this.ed,'mousedown',Bind(this,this.Show));
    addListener(this.ed,'mouseup',Bind(this,this.Show));
    //这2个事件是来判断光标所在位置是否别编辑
    addListener(this.original,'click',Bind(this,this.Showoriginal,[this.original]));  //显示源代码
  },
  Show:function(){                  
  var elm = [[0,"Bold"],[1,"Italic"],[2,"Underline"],[12,"InsertUnorderedList"],[13,"InsertOrderedList"]];
  var Is = null;
   for(var i=0;i<elm.length;i++)
   {
   Is = this.ed.queryCommandState(elm[i][1]);
   this.data[elm[i][0]].obj.style.backgroundPosition = Is?this.data[elm[i][0]].active:this.data[elm[i][0]].bgimg;
   this.data[elm[i][0]].obj.active = Is;
   }
  },
  Showoriginal:function(o){
   if(!this.zhe){
       var self = this
    this.zhe= create("div",document.body,function(elm){
    Extendpro(elm,{width:self.width + "px",height:"36px",left:getobjpos(self.toolbar,1) + "px",backgroundColor:"#ffffff",position:"absolute",top:getobjpos(self.toolbar,0) + "px"})
     elm.style.opacity = 0.7;
     elm.style.filter = "alpha(opacity:" + 70 + ")"
    });
   }
   if(o.checked)
   {
    this.iframe.style.display = "none";
    this.textarea.style.display = "block";
    this.zhe.style.display = "block";
    this.textarea.value = this.ed.body.innerHTML;
   }
   else
   {
    this.iframe.style.display = "block";
    this.textarea.style.display = "none";
    this.zhe.style.display = "none";
    this.ed.body.innerHTML = this.textarea.value;
   }

  },
  Changebgcolor:function(o,i){             
      if(o.active)return;
   o.style.backgroundPosition=i;
  },
  Exec:function(o,cmd,para){ 
   try{
    this.ed.execCommand(cmd,false, para);
    this.Show();
   }
   catch(err)
    {
    return;
   } 
  },
  InsertImage:function(o){      
   if(isIE)
   {
     !this.isfocus&&this.iframe.contentWindow.focus();
     this.rang = this.ed.selection.createRange();
   }
   this.lightbox.Show();
   this.makebody(this.Imagepopoup,"350px","插入图片","InsertImage","Imagepopoup"); 
  },
  CreateLink:function(o){
   if(isIE)this.rang = this.ed.selection.createRange();
   this.lightbox.Show(); 
   this.makebody(this.Linkpopoup,"350px","插入连接","CreateLink","Linkpopoup"); 
  },
  Fontcolor:function(o){
  var self = this;
  if(!this.fontcolorpopup)
  {
   var color = new popoup({width:"210px",title:"颜色选择"});
            this.fontcolorpopup = color.container;
   with(color.container){
    style.left = getobjpos(o,1) +"px";style.top  = getobjpos(o,0) + o.offsetHeight +"px";
   };
   var bgcolor = ["00","33","66","99","CC","FF","00","33","66","99","CC","FF"];
   $$(color.container,"div")[1].appendChild(createtab(12,18,function(tab){
   with(tab){cellPadding = 0,cellSpacing = 1,border = 0,bgColor="#333333"}
      },null,function(i,j,td){
   td.width=10,td.height=10,td.unselectable="on";
   td.style.backgroundColor = i<6?"#"+bgcolor[Math.floor(j/6)]+bgcolor[Math.floor(j%6)]+bgcolor[i]:"#"+bgcolor[Math.floor(j/6)+3]+bgcolor[Math.floor(j%6)]+bgcolor[i-6];
   var color = td.style.backgroundColor;
   addListener(td,'click',Bind(self,self.Execa,[color,"fontColor"]));
   addListener(td,'mousedown',BindAsEventListener(self,self.Bubble));
   }))
  }
  else
  {
   this.fontcolorpopup.style.display = "block";
  }
   this.Fpop = Bind(this,this.Hide);
         addListener(this.ed,'click',this.Fpop);
   addListener(document,'mousedown',this.Fpop);
  },
  Expression:function(o){
   var self = this;
   if(!this.facebgpopup)
   {
   var expr = new popoup({width:"190px",title:"插入表情"});
            this.facebgpopup = expr.container;
   with(expr.container){
    style.left = getobjpos(o,1) +"px";style.top  = getobjpos(o,0) + o.offsetHeight +"px";
   };
   $$(expr.container,"div")[1].appendChild(createtab(1,this.facebg.length,function(tab){
   with(tab){cellPadding = 0,cellSpacing = 1,border = 0,bgColor="#FFFFFF"}},null,function(i,j,td){
   with(td){style.backgroundImage="url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)";
   style.backgroundPosition = self.facebg[j].bgimg;
    width=self.facebg[i].wl;height=self.facebg[i].wl;
   }
   td.unselectable="on";
   addListener(td,'click',Bind(self,self.Execa,[self.facebg[j].src,"Expression"]));
   addListener(td,'mousedown',BindAsEventListener(self,self.Bubble))
   }));      
  }
  else
  {
   this.facebgpopup.style.display = "block";
  } 
   this.Fpop = Bind(this,this.Hide);
         addListener(this.ed,'click',this.Fpop);
   addListener(document,'mousedown',this.Fpop);
  },
  Layout:function(){
   var child = this.ed.body.childNodes;
   for(var i=0;i<child.length;i++)
   {
     if(child[i].nodeName == "DIV"||child[i].nodeName == "P")
     child[i].style.textIndent= child[i].style.textIndent== "2em"?"":"2em";
   }
  },
  Fontsize:function(o){
   var self = this;
   if(!this.fontsizepopup)
   { 
   var size = new popoup({width:"210px",title:"字号"});
            this.fontsizepopup = size.container;
   with(size.container){
    style.left = getobjpos(o,1) +"px";style.top  = getobjpos(o,0) + o.offsetHeight +"px";
   };
    for(var i = 0;i<this.fontsizedata .fontSize.length;i++)
    {
     create("a",$$(size.container,"div")[1],function(elm){
      with(elm){className="c"+(i+1);setAttribute("href","javascript:void(0);");
      innerHTML=self.fontsizedata.fontSize[i];}
      addListener(elm,"click",Bind(self,self.Execa,[i,"fontSize"]));
      addListener(elm,'mousedown',BindAsEventListener(self,self.Bubble)); 
     }) 
    }        
   }else
   {
    this.fontsizepopup.style.display = "block";
   }
   this.Fpop = Bind(this,this.Hide);
         addListener(this.ed,'click',this.Fpop);
   addListener(document,'mousedown',this.Fpop);
  },
  FontName:function(o){
   var self = this;
   if(!this.fontnamepopup)
   { 
   var name = new popoup({width:"200px",title:"字体"});
            this.fontnamepopup = name.container;
   with(name.container){
    style.left = getobjpos(o,1) +"px";style.top  = getobjpos(o,0) + o.offsetHeight +"px";
   };
    for(var i = 0;i<this.fontsizedata .fontname.length;i++)
    {
     create("a",$$(name.container,"div")[1],function(elm){
      with(elm){className="n";setAttribute("href","javascript:void(0);");
      innerHTML=self.fontsizedata.fontname[i];}
      addListener(elm,"click",Bind(self,self.Execa,[self.fontsizedata.fontname[i],"fontname"]));
      addListener(elm,'mousedown',BindAsEventListener(self,self.Bubble)); 
     }) 
    }        
   }else
   {
    this.fontnamepopup.style.display = "block";
   }
   this.Fpop = Bind(this,this.Hide);
         addListener(this.ed,'click',this.Fpop);
   addListener(document,'mousedown',this.Fpop); 
  },
  makebody :function(o,w,t,f,n){
   if(!o)
   {
       var self = this;
    this[n]= new popoup({width:w,title:t});  
    this[n].pos();
    $$(this[n].container,"div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >连接地址</span> <input style='width:200px;' type='text' /></div><div style='text-align:center; padding-top:15px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>"   
    this[n].elm = [$$(this[n].container,"input")[0],$$(this[n].container,"img")[0],$$(this[n].container,"img")[1]];
    this[n].elm[0].focus()
    addListener(this[n].elm[1],'click',Bind(this,this.Execa,[null,f]));
    addListener(this[n].elm[2],'click',function(){self.lightbox.Close();self[n].Close();});
   }
   else
   {
    with(this[n]){pos();Show();elm[0].value="";elm[0].focus();}
   }  
  },
  Addtable:function(){
   if(isIE)
   {
     !this.isfocus&&this.iframe.contentWindow.focus();
     this.rang = this.ed.selection.createRange();
   } 
   this.lightbox.Show();
   if(isIE)this.rang = this.ed.selection.createRange();
   if(!this.tablepopup)
   { 
       var self = this;
    this.tablepopup = new popoup({width:"300px",title:"插入表格"});
    this.tablepopup.pos();
    $$(this.tablepopup.container,"div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行数:<input style='width:50px; height:13px' type='text' /> 列数:<input style='width:50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的宽度:<input style='width:50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度:<input style='width:50px; height:13px' type='text' /> px<div style='text-align:center; margin-left:30px; margin-top:7px;'><img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220836549.p.gif'> <img src='http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220726721.p.gif'></div>" 
    var o = $$(this.tablepopup.container,"input");
    this.tablepopup.elm = [o[0],o[1],o[2],o[3],$$(this.tablepopup.container,"img")[0],$$(this.tablepopup.container,"img")[1]];
    addListener(this.tablepopup.elm[4],'click',Bind(this,this.Execa,[null,"CreateTable"]));
    addListener(this.tablepopup.elm[5],'click',function(){self.lightbox.Close();self.tablepopup.Close();});       
   }
   else
   {
       with(this.tablepopup){pos();Show();elm[0].focus();}
   }
   this.Fpop = Bind(this,this.Hide);
         addListener(this.ed,'click',this.Fpop);
   addListener(document,'mousedown',this.Fpop);
  },
  Hide:function(o){
   this.facebgpopup&&(this.facebgpopup.style.display = "none");
   this.fontsizepopup&&(this.fontsizepopup.style.display = "none");
   this.fontnamepopup&&(this.fontnamepopup.style.display = "none");
   this.fontcolorpopup&&(this.fontcolorpopup.style.display = "none");
   removeListener(this.ed,'click',this.Fpop);
   removeListener(document,'mousedown',this.Fpop);
  },
  Bubble:function(e){
   if(isIE){e.cancelBubble=true}else{e.stopPropagation()}
  },
  Execa:function(num,stamp){
   switch(stamp)
    {
        case "fontname":
     this.fontnamepopup.style.display = "none";
     this.ed.execCommand('FontName',false,num); 
     break;
     case "fontSize":
     this.fontsizepopup.style.display = "none";
     this.ed.execCommand("FontSize",false,num+1)
     break;
     case  "fontColor":
      this.fontcolorpopup.style.display = "none";
      this.ed.execCommand("ForeColor",false,num);
     break;
     case  "CreateLink":
      this.lightbox.Close();this.Linkpopoup.Close();
      if(this.Linkpopoup.elm[0].value=="")return;
      if(isIE)
      {
       this.rang.execCommand("CreateLink",false,this.Linkpopoup.elm[0].value);
       this.rang.parentElement().target="_blank ";
      }
      else
      {
       this.ed.execCommand("CreateLink",false,this.Linkpopoup.elm[0].value);
       this.rang = this.iframe.contentWindow.getSelection().getRangeAt(0);
       this.rang.commonAncestorContainer.parentNode.target="_blank ";
      }
     break;
     case  "InsertImage":
      this.lightbox.Close();this.Imagepopoup.Close();
      if(this.Imagepopoup.elm[0].value=="")return;
      isIE?this.rang.execCommand("InsertImage",false,this.Imagepopoup.elm[0].value):this.ed.execCommand("InsertImage",false,this.Imagepopoup.elm[0].value);
     break; 
     case  "Expression":
      this.facebgpopup.style.display = "none";
      isIE&&(this.iframe.contentWindow.focus());
      this.ed.execCommand("InsertImage",false,num); 
     break; 
     case "CreateTable" :
      this.lightbox.Close();this.tablepopup.Close();
      var  o = this.tablepopup.elm;
      var  p =  null;
      if(isIE)
      {
       this.rang.execCommand("InsertImage",false,"http://xxx.com/xxxxx.gif");
       p = this.rang.parentElement();
      }
      else
      {
       this.ed.execCommand("InsertImage",false,"http://xxx.com/xxxxx.gif");
        p = this.iframe.contentWindow.getSelection().getRangeAt(0).commonAncestorContainer;
      }
     var tab = createtab(o[0].value,o[1].value,function(tab){
     with(tab){cellPadding = 0,cellSpacing = 1,border = 0,bgColor="#CCCCCC",width=o[2].value;}
     },null,function(i,j,td){td.height=o[3].value;td.width=o[2].value/o[1].value; td.style.backgroundColor="#FFFFFF"},this.ed);
      for(var i = 0;i<p.childNodes.length;i++)
      {
          if(p.childNodes[i].nodeName=="IMG"&&p.childNodes[i].src=="http://xxx.com/xxxxx.gif")
       {p.replaceChild(tab,p.childNodes[i])}
      }
      p.insertBefore(this.ed.createElement("br"),tab.nextSibling)
     break;           
    }
  }
 });

var popoup = new Class({
 options:{
  width:"200px",
  title:"标题"
 },
 initialize:function(options){
  this.container = create("div",document.body);
  Extend(this.options,options);
  this.title = this.options.title;
  with(this.container){
   className = "pp";style.width = this.options.width;
   innerHTML = "<div class='ppt'><span style='margin-left:8px;'></span></div><div style='height:auto; width:auto; padding:7px; background-color:#FFFFFF'></div>";
  }
  this.w = this.container.offsetWidth;
  this.h = this.container.offsetHeight;   
  $$(this.container,"span")[0].innerHTML = this.title;
 },
 pos:function(){
   var self = this;
    with(this.container){
    style.left = (Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth) - self.w)/2+"px";
    style.top =(Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight)- self.h)/2+document.documentElement.scrollTop+"px";
    } 
 }, 
 Show:function(){
  this.container.style.display ="";
 },
 Close:function(){
  this.container.style.display ="none";
 }
})
 
  var LightBox = new Class({
  options:{
    Obj      : null,
   Color    : "#fff",
   Opacity  : 50,
   zIndex   : 1000
  },
  initialize:function(options){
   this.Obj     = this.options.Obj;
   this.Color   = this.options.Color;
   this.Opacity = this.options.Opacity;
   this.zIndex  = this.options.zIndex;
   Extend(this, options || {});
   this.Obj     = this.Obj||document.body.insertBefore(document.createElement("div"), document.body.childNodes[0])
      with(this.Obj.style){
   display = "none"; zIndex = this.zIndex; left = top = "0px"; position = "fixed"; width = height = "100%";
   };
  if(isIE6){
   this.Obj.style.position = "absolute";
   this._resize = Bind(this, function(){
   this.Obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px";
   this.Obj.style.height = Math.max(document.documentElement.scrollHeight, document.documentElement.clientHeight) + "px"
     });
  }
  this.Obj.innerHTML = '<iframe style="position:absolute;top:0;left:0;width:100%;height:100%;filter:alpha(opacity=0);"></iframe>';   
  },
  Show:function() {
     var self = this;
  if(isIE6){ this._resize(); addListener(window,"resize", self._resize); }
  with(this.Obj.style){
   isIE ? filter = "alpha(opacity:" + this.Opacity + ")" : opacity = this.Opacity / 100;
   backgroundColor = this.Color; display = "block";
  }; 
     },
  Close: function() {
  this.Obj.style.display = "none";
     }
 })

 window.onload = function(){
 new Editer($('ss'),new LightBox({Color:"#000000",Opacity:20,zIndex:3}),{height:700,width:890});
  new Editer($('sss'),new LightBox({Color:"#000000",Opacity:20,zIndex:3}),{height:500,width:760,oninit:function(){
  this.data[19].exist=false;this.data[18].exist=false;}});
  new Editer($('ssss'),new LightBox({Color:"#000000",Opacity:20,zIndex:3}),{height:350,width:550,oninit:function(){
  this.data[19].exist=false;this.data[18].exist=false;this.data[16].exist=false;this.data[20].exist=false;
  this.data[15].exist=false;this.data[14].exist=false;this.data[3].exist=false;
  }});
 }
</script>
</body>
</html>

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/wtcsy/archive/2009/07/20/4362421.aspx

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Mopria Print Service 2.3推出新的移动打印功能,支持用户使用 安卓设备的“分享”功能进行打印 拓展移动打印功能,方便用户使用其最喜爱的应用程序中的“分享”选项打印照片、文本 、网页等 加州圣拉蒙 – 2017年11月15日– 致力于推动全行业移动打印标准的全球非盈利性会员制组织 Mopria®联盟今日发布Mopria Print Service 2.3,以扩大移动打印支持,允许用户使用诸多最喜爱的 应用程序中的“分享”功能进行打印。此外,Mopria Print Service 2.3还与Android 8.0 Oreo™兼容,后 者的默认打印解决方案采用Mopria核心技术,支持通过1亿多台经Mopria认证的打印机实现轻松移 动打印。所有安卓设备可在Google Play™商店下载其最新版。 Mopria Print Service 2.3利用Facebook、Flipboard、LinkedIn、Twitter和Pinterest等诸多 备受欢迎的应用中现有的“分享”功能,使用户能够轻松打印。当使用“分享”功能时,用户 将看到其中包含Mopria Print Service选项,该选项位于电子邮件和消息选项下方。“分享” 图标位于醒目位置,用户只需选择Mopria Print Service选项、选择打印机、调整设置并 打印即可。 该新版本还支持沿多个方向打孔、折边、装订等分页装订选项,同时提供新界面,新增一 项便于用户快速查看可供使用的打印机并确定其状态的功能。该新界面提供便捷的起点, 方便用户添加或隐藏打印机、访问Mopria设置、排除打印故障以及查看经Mopria认证的 打印机列表。该新界面包含教程,已将这一用户请求最多的功能添加至该项服务中,为新 用户提供移动打印流程指导及建议。 Mopria联盟指导委员会主席Brent Richtsmeier表示:“我们将继续为Mopria Print Service 添加功能,旨在使安卓设备的移动打印体验尽可能轻松便捷。利用全球最受欢迎的应用中 的分享功能中新增的打印选项,用户将重新发现移动打印的便利。” 自发布以来,Mopria Print Service已支持通过安卓智能手机和平板电脑连接经Mopria认 证的打印机实现打印。Mopria Print Service允许用户轻松自定义彩色打印、打印份数、 双面打印、纸张尺寸、页面打印范围、介质类型和打印方向等打印设置,同时还可以定制 用户身份验证、点针式打印和会计功能等工作场所功能,而且不需要安装特定打印机品牌 的应用程序。 自创始人佳能、惠普、三星和施乐成立Mopria联盟以来的四年里,该非盈利性会员制组 织成员已增加至21个,他们代表着全球打印机行业。除创始公司之外,Mopria联盟目前 包括:Adobe、柯尼卡美能达、高通、利盟、京瓷、东芝、Brother、爱普生、富士施乐 、微软、NEC、Pantum、理光、YSoft、夏普、戴尔和致伸科技(Primax)。 Mopria技术目前设备安装数量已超过7亿台,预计不出一年便会超过10亿台。在继续努力 使移动打印变得轻松便捷的同时,Mopria联盟还将进一步专注于云打印和扫描标准化。 Mopria联盟的目标在于促使这些解决方案为消费者和企业用户变得更加方便可及、直观 简便。如需获取经Mopria认证的打印机和打印附件的最新列表,敬请访问: http://mopria.org/certified-products。 关于Mopria®联盟 Mopria®联盟是一个非盈利性会员制组织,由全球领先的科技公司组成,其成立初衷为简 化智能手机、平板电脑和其他设备的打印操作。该联盟制定并推广一系列技术标准,旨在 提供连接不同设备和移动操作系统的直观体验。这些标准的普及使用户能够与各种品牌的 打印机进行无缝交互。此外,对新移动设备或打印机而言,将无需进行应用程序的下载和 安装。利用支持Mopria的移动设备寻找经Mopria认证的打印机和附件实现轻松打印,可 在www.mopria.org了解详情或者在Google Play商店下载最新版Mopria软件。
jTopo是一个开源的基于HTML5 Canvas的JavaScript拓扑图形绘制库。jTopo在线编辑器是基于jTopo库开发的一个能够实现在线拓扑图编辑的工具。 jTopo在线编辑器具有以下特点和功能: 1. 界面友好:jTopo在线编辑器拥有简单美观的界面设计,用户可以通过直观的操作进行拓扑图的编辑。 2. 功能丰富:jTopo在线编辑器提供了多种拓扑图元素,包括节点、连线、分组等,用户可以通过拖拽、缩放、编辑等功能进行定制化拓扑图的创建和修改。 3. 自定义样式:jTopo在线编辑器支持用户自定义拓扑图元素的样式,包括节点的形状、大小、颜色、边框等,用户可以根据实际需求自由调整拓扑图的外观。 4. 支持交互:jTopo在线编辑器可以绑定各种事件,实现用户与拓扑图的交互,如拖拽节点、点击节点等,可根据事件触发执行自定义的函数。 5. 数据存储:jTopo在线编辑器提供了数据导入和导出的功能,用户可以将拓扑图的数据保存为JSON格式或导入已有的拓扑图数据进行编辑。 6. 浏览器兼容性:jTopo在线编辑器兼容主流的浏览器,并在移动设备上也能够良好地运行。 jTopo在线编辑器通过其强大的功能和便捷的操作,为用户提供了一个方便快捷的拓扑图编辑工具,可广泛应用于网络拓扑、流程图、组织结构图等领域,帮助用户简化拓扑图的创建和修改过程,提升工作效率。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值