• 热门专题

javascript在线文本编辑器

作者:  发布日期:2014-10-29 18:41:13
Tag标签:编辑器  文本  
  • javascript 在线文本编辑器实现代码。效果如下:


    <!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=utf-8" /> 
    <title>Editor</title> 
    <style type="text/css"> 
    body{ font-size:12px;} 
    #ed{ height:300px; width:800px; background-color: } 
    .sssss{ background-image:url(http://www.zzsky.cn/build/images/20099493121.gif)} 
    .tag{ background-image:url(http://www.zzsky.cn/build/images/20099493121.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;} 
    .span0_hover{background-position:-0px -2px;width:22px} 
    .span1_hover{background-position:-30px -2px;width:22px} 
    .span2_hover{background-position:-58px -2px;width:22px} 
    .span3_hover{background-position:-86px -57px;width:73px} 
    .span4_hover{background-position:-86px -28px;width:73px} 
    .span5_hover{background-position:-164px -2px;width:22px; background-color:#000000} 
    .span6_hover{background-position:-194px -2px;width:22px} 
    .span7_hover{background-position:-45px -192px;width:22px} 
    .span8_hover{background-position:-76px -192px;width:22px} 
    .span9_hover{background-position:-58px -247px;width:22px} 
    .span10_hover{background-position:-86px -247px;width:22px} 
    .span11_hover{background-position:-113px -247px;width:22px} 
    .span12_hover{background-position:-476px -192px;width:22px} 
    .span13_hover{background-position:-505px -192px;width:22px} 
    .span14_hover{background-position:-333px -247px;width:22px} 
    .span15_hover{background-position:-532px -192px;width:22px} 
    .span16_hover{background-position:-560px -192px;width:22px} 
    .span17_hover{background-position:-455px -247px;width:22px} 
    .span18_hover{background-position:-222px -2px;width:73px} 
    .span19_hover{background-position:-380px -2px;width:74px} 
    .span20_hover{background-position:-460px -2px;width:71px} 
    .span0{background-position:-0px -57px;width:22px} 
    .span1{background-position:-30px -57px;width:22px} 
    .span2{background-position:-58px -57px;width:22px} 
    .span3{background-position:-86px -57px;width:73px} 
    .span4{background-position:-86px -28px;width:73px} 
    .span5{background-position:-164px -57px;width:22px;background-color:#000000} 
    .span6{background-position:-194px -57px;width:22px} 
    .span7{background-position:-45px -84px;width:22px} 
    .span8{background-position:-76px -84px;width:22px} 
    .span9{background-position:-58px -140px;width:22px} 
    .span10{background-position:-86px -140px;width:22px} 
    .span11{background-position:-113px -140px;width:22px} 
    .span12{background-position:-476px -84px;width:22px} 
    .span13{background-position:-505px -84px;width:22px} 
    .span14{background-position:-333px -140px;width:22px} 
    .span15{background-position:-532px -84px;width:22px} 
    .span16{background-position:-560px -84px;width:22px} 
    .span17{background-position:-455px -140px;width:22px} 
    .span18{background-position:-222px -57px;width:73px} 
    .span19{background-position:-380px -57px;width:74px} 
    .span20{background-position:-460px -57px;width:71px} 
    .span0_active{background-position:-0px -28px;width:22px} 
    .span1_active{background-position:-30px -28px;width:22px} 
    .span2_active{background-position:-58px -28px;width:22px} 
    .span3_active{background-position:-476px -299px;width:22px} 
    .span4_active{background-position:-505px -299px;width:22px} 
    .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;} 
    .toolbarlayer{position:absolute;opacity:0.7;filter:alpha(opacity:70);background-color:#ffffff;height:36px} 
    .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> 
    
     
    <div id='ss'></div>
    
    
    
     
    <div id='sss'></div> 
    <script> 
    var Sys = (function(ua){ 
    var s = {}; 
    s.IE = ua.match(/msie ([\d.]+)/)?true:false; 
    s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false; 
    s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false; 
    s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false; 
    s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false; 
    s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false; 
    return s; 
    })(navigator.userAgent.toLowerCase()); 
    Sys.IE6&&document.execCommand("BackgroundImageCache", false, true); 
    var $ = function (id) { 
    return "string" == typeof id?document.getElementById(id):id; 
    }; 
    function Each(list, fun){ 
    for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); } 
    }; 
    var Css = function(e,o){ 
    if(typeof o=="string") 
    { 
    e.style.cssText=o; 
    return; 
    } 
    for(var i in o) 
    e.style[i] = o[i]; 
    }; 
    var Attr = function(e,o){ 
    for(var i in o) 
    e.setAttribute(i,o[i]); 
    }; 
    var $$ = function(p,e){ 
    return p.getElementsByTagName(e); 
    }; 
    function create(e,p,fn){ 
    var element = document.createElement(e); p&&p.appendChild(element);fn&&fn(element);return element; 
    }; 
    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"):create("table"); 
    arisetab&&arisetab(table); 
    var tbody = p?p.createElement("tbody"):create("tbody"); 
    for(var i=0;i<tri;i++) 
    { 
    var tr = p?p.createElement("tr"):create("tr"); 
    arisetr&&arisetr(i,tr); 
    for(var j=0;j<tdi;j++) 
    { 
    var td = p?p.createElement("td"):create("td"); 
    arisetd&&arisetd(i,j,td); 
    tr.appendChild(td); 
    } 
    tbody.appendChild(tr); 
    } 
    table.appendChild(tbody); 
    return table; 
    }; 
    var Extend = function(destination, source) { 
    for (var property in source) { 
    destination[property] = source[property]; 
    } 
    }; 
    var Bind = function(object, fun) { 
    var args = Array.prototype.slice.call(arguments).slice(2); 
    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); 
    }; 
    var Getpos = function(o){ 
    var x = 0, y = 0; 
    do{x += o.offsetLeft;y += o.offsetTop;}while((o=o.offsetParent)); 
    return {'x':x,'y':y}; 
    }; 
    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,data,b,options){ 
    this.container = container; 
    this._body = create("div",container); 
    this.toolbar = create("div",this._body); //工具栏 
    this.iframe = create("iframe",this._body); //编辑区 
    this.textarea = create("textarea",this._body); //显示源代码的框框 
    this.bottom = create("div",this._body); //底部 
    this.lightbox = b; //lightbox 
    this.original = create("input"); //显示源代码的按纽 
    this.ed = null; 
    this.isfocus = false; 
    this.option = {}; 
    Extend(this.option,this.options); 
    Extend(this.option,options); 
    this.rang = null; //选中区 
    this.Fpop = null; 
    this.option.oninit(); 
    this.toolbar.className = "ebar"; 
    this._body.className = "ebody"; 
    this.textarea.className = "textarea"; 
    Css(this._body,{width:this.option.width+"px",height:this.option.height+"px"}); 
    Css(this.textarea,{width:Sys.IE?this.option.width-2+"px":this.option.width+"px",height:Sys.IE?this.option.height-66+"px":this.option.height-70+"px"}); 
    Attr(this.iframe,{src:"about:blank",width:Sys.IE?this.option.width:this.option.width-4,height:Sys.IE?this.option.height-66:this.option.height-70}); 
    Attr(this.original,{type:"checkbox",className:"checkbox",align:"top"}); 
    this.bottom.className = "bottom"; 
    this.bottom.innerHTML = "<span>显示源代码</span>"; 
    this.bottom.insertBefore(this.original,this.bottom.childNodes[0]); 
    this.ed=Sys.IE?this.iframe.contentWindow.document:this.iframe.contentDocument; 
    this.ed.open(); 
    var div = Sys.IE?"<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(); 
    this.ed.contentEditable = true; 
    this.ed.designMode = "on";//设置编辑区为可编辑 
    for(var i = 0,l = data.length;i<l;i++) 
    { 
    var o = create("span",this.toolbar); 
    Attr(o,{title:data[i].title,active:false,unselectable:"on"}); 
    o.className ="tag "+data[i].Class; 
    addListener(o,"mouseover",Bind(this,this.Changebgcolor,o,data[i].hover)); 
    addListener(o,"mouseout",Bind(this,this.Changebgcolor,o,data[i].Class)); 
    addListener(o,"click",Bind(this,this[data[i].action],o,data[i].args)); 
    } 
    //////////////////////////生成工具栏 
    addListener(this.iframe.contentWindow,"focus",Bind(this,function(){this.isfocus = true;})); 
    addListener(this.iframe.contentWindow,"blur",Bind(this,function(){this.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)); //显示源代码 
    }, 
    Changebgcolor:function(o,name,p){ 
    if(o.active)return; 
    o.className = "tag "+name; 
    }, 
    Show:function(){ 
    var spans = $$(this.toolbar,"span"),Is; 
    var elm = [[spans[0],"Bold","tag span0_active","tag span0"], 
    [spans[1],"Italic","tag span1_active","tag span1"], 
    [spans[2],"Underline","tag span2_active","tag span2"], 
    [spans[12],"InsertUnorderedList","tag span3_active","tag span12"], 
    [spans[13],"InsertOrderedList","tag span4_active","tag span13"]]; 
    for(var i=0,l=elm.length;i<l;i++) 
    { 
    Is = this.ed.queryCommandState(elm[i][1]); 
    elm[i][0].className = Is?elm[i][2]:elm[i][3]; 
    elm[i][0].active = Is; 
    } 
    }, 
    Showoriginal:function(o){ 
    if(!this.toolbarlayer){ 
    this.toolbarlayer= create("div",document.body); 
    this.toolbarlayer.className = "toolbarlayer"; 
    var pos = Getpos(this.toolbar); 
    Css(this.toolbarlayer,{width:this.option.width+"px",left:pos.x+"px",top:pos.y+"px"}); 
    } 
    if(o.checked) 
    { 
    this.iframe.style.display = "none"; 
    this.textarea.style.display = "block"; 
    this.toolbarlayer.style.display = "block"; 
    this.textarea.value = this.ed.body.innerHTML; 
    } 
    else 
    { 
    this.iframe.style.display = "block"; 
    this.textarea.style.display = "none"; 
    this.toolbarlayer.style.display = "none"; 
    this.ed.body.innerHTML = this.textarea.value; 
    } 
    }, 
    Exec:function(o,cmd,para){ 
    try{ 
    this.ed.execCommand(cmd,false, para); 
    this.Show(); 
    } 
    catch(err) 
    { 
    return; 
    } 
    }, 
    InsertImage:function(o){ 
    if(Sys.IE) 
    { 
    !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(Sys.IE)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; 
    var pos = Getpos(o); 
    Css(color.container,{left : pos.x + "px",top : pos.y + 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){ 
    Attr(tab,{cellPadding:0,cellSpacing:1,border:0,bgColor:"#333333"}); 
    },null,function(i,j,td){ 
    var color =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]; 
    Attr(td,{width:10,height:10,unselectable:"on"}); 
    td.style.backgroundColor = color; 
    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; 
    var pos = Getpos(o); 
    Css(expr.container,{left : pos.x +"px",top : pos.y + o.offsetHeight +"px"}); 
    $$(expr.container,"div")[1].appendChild(createtab(1,this.option.facebg.length,function(tab){ 
    Attr(tab,{cellPadding : 0,cellSpacing : 1,border : 0,bgColor:"#FFFFFF"}); 
    },null,function(i,j,td){ 
    Css(td,{backgroundImage:"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090719/220510752.p.gif)",backgroundPosition : self.option.facebg[j].bgimg}); 
    Attr(td,{width:self.option.facebg[i].wl,height:self.option.facebg[i].wl,unselectable:"on"}); 
    addListener(td,'click',Bind(self,self.Execa,self.option.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,l=child.length;i<l;i++) 
    { 
    if(child[i].nodeName == "DIV"||child[i].nodeName == "P") 
    child[i].style.textIndent= child[i].style.textIndent== "2em"?"":"2em"; 
    } 
    }, 
    Fontsize:function(o){ 
    if(!this.fontsizepopup) 
    { 
    var size = new popoup({width:"210px",title:"字号"}),a; 
    this.fontsizepopup = size.container; 
    var pos = Getpos(o); 
    Css(size.container,{left:pos.x +"px",top : pos.y + o.offsetHeight +"px"}); 
    for(var i = 0,l=this.option.fontsizedata .fontSize.length;i<l;i++) 
    { 
    a = create("a",$$(size.container,"div")[1]); 
    a.className = "c"+(i+1); 
    a.setAttribute("href","javascript:void(0);") 
    a.innerHTML=this.option.fontsizedata.fontSize[i]; 
    addListener(a,"click",Bind(this,this.Execa,i,"fontSize")); 
    addListener(a,'mousedown',BindAsEventListener(this,this.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){ 
    if(!this.fontnamepopup) 
    { 
    var name = new popoup({width:"200px",title:"字体"}),a; 
    this.fontnamepopup = name.container; 
    var pos = Getpos(o); 
    Css(name.container,{left:pos.x +"px",top:pos.y + o.offsetHeight +"px"}); 
    for(var i = 0,l=this.option.fontsizedata .fontname.length;i<l;i++) 
    { 
    a = create("a",$$(name.container,"div")[1]); 
    a.className = "n"; 
    a.setAttribute("href","javascript:void(0);"); 
    a.innerHTML=this.option.fontsizedata.fontname[i]; 
    addListener(a,"click",Bind(this,this.Execa,this.option.fontsizedata.fontname[i],"fontname")); 
    addListener(a,'mousedown',BindAsEventListener(this,this.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(Sys.IE) 
    { 
    !this.isfocus&&this.iframe.contentWindow.focus(); 
    this.rang = this.ed.selection.createRange(); 
    } 
    this.lightbox.Show(); 
    if(Sys.IE)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(Sys.IE){e.cancelBubble=true}else{e.stopPropagation()} 
    }, 
    Execa:function(num,stamp){ 
    var exec = { 
    fontname : function(){ 
    this.fontnamepopup.style.display = "none"; 
    this.ed.execCommand('FontName',false,num); 
    }, 
    fontSize : function(){ 
    this.fontsizepopup.style.display = "none"; 
    this.ed.execCommand("FontSize",false,num+1) 
    }, 
    fontColor : function(){ 
    this.fontcolorpopup.style.display = "none"; 
    this.ed.execCommand("ForeColor",false,num); 
    }, 
    CreateLink : function(){ 
    this.lightbox.Close();this.Linkpopoup.Close(); 
    if(this.Linkpopoup.elm[0].value=="")return; 
    if(Sys.IE) 
    { 
    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 "; 
    } 
    }, 
    InsertImage : function(){ 
    this.lightbox.Close();this.Imagepopoup.Close(); 
    if(this.Imagepopoup.elm[0].value=="")return; 
    Sys.IE?this.rang.execCommand("InsertImage",false,this.Imagepopoup.elm[0].value):this.ed.execCommand("InsertImage",false,this.Imagepopoup.elm[0].value); 
    }, 
    Expression : function(){ 
    this.facebgpopup.style.display = "none"; 
    Sys.IE&&(this.iframe.contentWindow.focus()); 
    this.ed.execCommand("InsertImage",false,num); 
    }, 
    CreateTable : function(){ 
    this.lightbox.Close();this.tablepopup.Close(); 
    var o = this.tablepopup.elm,p = null; 
    if(Sys.IE) 
    { 
    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){ 
    Attr(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); 
    var imgs = p.getElementsByTagName("img"); 
    for(var i = 0,l=p.childNodes.length;i<l;i++) 
    { 
    if(imgs[i].src=="http://xxx.com/xxxxx.gif") 
    {p.replaceChild(tab,imgs[i])} 
    } 
    p.insertBefore(this.ed.createElement("br"),tab.nextSibling); 
    } 
    }; 
    Bind(this,exec[stamp])(); 
    } 
    }); 
    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; 
    this.container.className = "pp"; 
    this.container.style.width = this.options.width; 
    this.container.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 str ="left:"+(Math.max(document.documentElement.scrollWidth,document.documentElement.clientWidth) - this.w)/2+"px;top:"+((Math.min(document.documentElement.scrollHeight, document.documentElement.clientHeight)- this.h)/2+document.documentElement.scrollTop)+"px" 
    Css(this.container,str); 
    }, 
    Show:function(){ 
    this.container.style.display =""; 
    }, 
    Close:function(){ 
    this.container.style.display ="none"; 
    } 
    }) 
    var LightBox ={ 
    obj : null, 
    config :{ 
    Color : "#fff", 
    Opacity : 80, 
    zIndex : 5 
    }, 
    init : function(options){ 
    Extend(this.config,options||{}); 
    Extend(this,this.config); 
    delete this.config; 
    this.obj = document.body.insertBefore(document.createElement("div"), document.body.childNodes[0]); 
    var str = "display:none; z-index:"+this.zIndex+";left:0px;top:0px;position:fixed;width:100%;height:100%;background-color:"+this.Color+(Sys.IE ? ";filter : alpha(opacity:" + this.Opacity + ")" : ";opacity :"+ this.Opacity / 100); 
    Css(this.obj,str); 
    if(Sys.IE6){ 
    this.obj.style.position = "absolute"; 
    var _self = this; 
    this._resize = function(){ 
    _self.obj.style.width = Math.max(document.documentElement.scrollWidth, document.documentElement.clientWidth) + "px"; 
    _self.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>'; 
    } 
    return this; 
    }, 
    Show : function(){ 
    if(Sys.IE6){this._resize(); addListener(window,"resize", this._resize); } 
    this.obj.style.display = "block"; 
    }, 
    Close : function(){ 
    this.obj.style.display = "none"; 
    if(Sys.IE6)removeListener(window,"resize", LightBox._resize); 
    } 
    } 
    window.onload = function(){ 
    var data = [{Class:"span0",hover:"span0_hover",title:"加粗",action:"Exec",args:"bold"}, 
    {Class:"span1",hover:"span1_hover",title:"斜体",action:"Exec",args:"Italic"}, 
    {Class:"span2",hover:"span2_hover",title:"下划线",action:"Exec",args:"Underline"}, 
    {Class:"span3",hover:"span3_hover",title:"字号",action:"Fontsize",args:null}, 
    {Class:"span4",hover:"span4_hover",title:"字体",action:"FontName",args:null}, 
    {Class:"span5",hover:"span5_hover",title:"文字颜色",action:"Fontcolor",args:null}, 
    {Class:"span6",hover:"span6_hover",title:"插入链接",action:"CreateLink",args:null}, 
    {Class:"span7",hover:"span7_hover",title:"剪贴",action:"Exec",args:"Cut"}, 
    {Class:"span8",hover:"span8_hover",title:"复制",action:"Exec",args:"Copy"}, 
    {Class:"span9",hover:"span9_hover",title:"左对齐",action:"Exec",args:"JustifyLeft"}, 
    {Class:"span10",hover:"span10_hover",title:"居中对齐",action:"Exec",args:"JustifyCenter"}, 
    {Class:"span11",hover:"span11_hover",title:"右对齐",action:"Exec",args:"JustifyRight"}, 
    {Class:"span12",hover:"span12_hover",title:"项目符号",action:"Exec",args:"InsertUnorderedList"}, 
    {Class:"span13",hover:"span13_hover",title:"编号",action:"Exec",args:"InsertOrderedList"}, 
    {Class:"span14",hover:"span14_hover",title:"插入表格",action:"Addtable",args:null}, 
    {Class:"span15",hover:"span15_hover",title:"减少缩进",action:"Exec",args:"Outdent"}, 
    {Class:"span16",hover:"span16_hover",title:"增加缩进",action:"Exec",args:"Indent"}, 
    {Class:"span17",hover:"span17_hover",title:"清除样式",action:"Exec",args:"RemoveFormat"}, 
    {Class:"span18",hover:"span18_hover",title:"插入图片",action:"InsertImage",args:null}, 
    {Class:"span19",hover:"span19_hover",title:"插入表情",action:"Expression",args:null}, 
    {Class:"span20",hover:"span20_hover",title:"自动排版",action:"Layout",args:null} 
    ]; 
    new Editer($('ss'),data,LightBox.init()); 
    } 
    </script> 
    </body 
    </html> 


About IT165 - 广告服务 - 隐私声明 - 版权申明 - 免责条款 - 网站地图 - 网友投稿 - 联系方式
本站内容来自于互联网,仅供用于网络技术学习,学习中请遵循相关法律法规