• 小型的文本编辑器,找了好久,终于找到了


    <!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; 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; 760px; border:1px solid #999999}
    .ebar{ 100%; height:36px; background-color:#F0F2F5;};
    .edit{ height:550px; 100%; border:0px;}
    .popupfont{ 200px; height:auto; border:1px solid #7B9EBD; background-color:#F7F7F7; position:absolute;padding:3px; }
    a.c1{ 96%; height:auto; font-size:10px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
    a.c1:hover{96%; height:auto; font-size:10px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.c2{ 96%; height:auto; font-size:12px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
    a.c2:hover{96%; height:auto; font-size:12px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.c3{ 96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666 ;text-decoration:none;}
    a.c3:hover{96%; height:auto; font-size:14px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.c4{ 96%; height:auto; font-size:16px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
    a.c4:hover{96%; height:auto; font-size:16px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.c5{ 96%; height:auto; font-size:18px;display:block;border:1px solid #F7F7F7;padding:3px; color:#666666;text-decoration:none;}
    a.c5:hover{96%; height:auto; font-size:18px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.c6{ 96%; height:auto; font-size:22px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
    a.c6:hover{96%; height:auto; font-size:22px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.c7{ 96%; height:auto; font-size:26px;display:block;border:1px solid #F7F7F7; padding:3px;color:#666666;text-decoration:none;}
    a.c7:hover{96%; height:auto; font-size:26px; border:1px solid #FFCF00;display:block;background-color:#F7EBBD;padding:3px;color:#666666;text-decoration:none;}
    a.n{ 96%; height:auto; font-size:14px;display:block;border:1px solid #F7F7F7;padding:3px;color:#666666;text-decoration:none; }
    a.n:hover{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;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; 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:"加粗",22,cbg:"-0px -2px",action:"Exec",args:["bold",null],exist:true},
                 {obj:null,bgimg:"-30px -57px",active:"-30px -28px",title:"斜体",22,cbg:"-30px -2px",action:"Exec",args:["Italic",null],exist:true},
                 {obj:null,bgimg:"-58px -57px",active:"-58px -28px",title:"下划线",22,cbg:"-58px -2px",action:"Exec",args:["Underline",null],exist:true},
                 {obj:null,bgimg:"-86px -57px",title:"字号",73,cbg:"-86px -57px",action:"Fontsize",args:[],exist:true},
                 {obj:null,bgimg:"-86px -28px",title:"字体",73,cbg:"-86px -28px",action:"FontName",args:[],exist:true},
                 {obj:null,bgimg:"-164px -57px",title:"文字颜色",22,bgcolor:"#000000",cbg:"-164px -2px",action:"Fontcolor",args:[],exist:true},
                 {obj:null,bgimg:"-194px -57px",title:"插入链接",22,cbg:"-194px -2px",action:"CreateLink",args:[],exist:true},
                 {obj:null,bgimg:"-45px -84px",title:"剪贴",22,cbg:"-45px -192px",action:"Exec",args:["Cut",null],exist:true},
                 {obj:null,bgimg:"-76px -84px",title:"复制",22,cbg:"-76px -192px",action:"Exec",args:["Copy",null],exist:true},             
                 {obj:null,bgimg:"-58px -140px",title:"左对齐",22,cbg:"-58px -247px",action:"Exec",args:["JustifyLeft",null],exist:true},
                 {obj:null,bgimg:"-86px -140px",title:"居中对齐",22,cbg:"-86px -247px",action:"Exec",args:["JustifyCenter",null],exist:true},
                 {obj:null,bgimg:"-113px -140px",title:"右对齐",22,cbg:"-113px -247px",action:"Exec",args:["JustifyRight",null],exist:true},
                 {obj:null,bgimg:"-476px -84px",active:"-476px -299px",title:"项目符号",22,cbg:"-476px -192px",action:"Exec",args:["InsertUnorderedList",null],exist:true},
                 {obj:null,bgimg:"-505px -84px",active:"-505px -299px",title:"编号",22,cbg:"-505px -192px",action:"Exec",args:["InsertOrderedList",null],exist:true},
                 {obj:null,bgimg:"-333px -140px",title:"插入表格",22,cbg:"-333px -247px",action:"Addtable",args:[],exist:true},
                 {obj:null,bgimg:"-532px -84px",title:"减少缩进",22,cbg:"-532px -192px",action:"Exec",args:["Outdent",null],exist:true},
                 {obj:null,bgimg:"-560px -84px",title:"增加缩进",22,cbg:"-560px -192px",action:"Exec",args:["Indent",null],exist:true},
                 {obj:null,bgimg:"-455px -140px",title:"清除样式",22,cbg:"-455px -247px",action:"Exec",args:["RemoveFormat",null],exist:true},
                 {obj:null,bgimg:"-222px -57px",title:"插入图片",73,cbg:"-222px -2px",action:"InsertImage",args:[],exist:true},
                 {obj:null,bgimg:"-380px -57px",title:"插入表情",74,cbg:"-380px -2px",action:"Expression",args:[],exist:true},
                 {obj:null,bgimg:"-460px -57px",title:"自动排版",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.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,{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({"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({"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({"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({"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({w,title:t});         
                 this[n].pos();
                 $$(this[n].container,"div")[1].innerHTML = "<div style=' margin-top:6px; margin-left:10px'><span >连接地址</span> <input style='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({"300px",title:"插入表格"});
                 this.tablepopup.pos();
                 $$(this.tablepopup.container,"div")[1].innerHTML = "<div style='margin-left:30px; margin-top:7px;'>行数:<input style='50px; height:13px' type='text' /> 列数:<input style='50px;height:13px' type='text' /></div><div style=' margin-left:30px; margin-top:7px;'>表格的宽度:<input style='50px; height:13px' type='text' /> px</div><div style=' margin-left:30px; margin-top:7px;'>表行的高度:<input style='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:{
            "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; 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;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,890});
         new Editer($('sss'),new LightBox({Color:"#000000",Opacity:20,zIndex:3}),{height:500,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,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>

  • 相关阅读:
    java.io.IOException: Premature EOF
    springmvc集成shiro例子
    eclipse调试(debug)的时候,出现Source not found,Edit Source Lookup Path,一闪而过
    【译】Core Java Questions and Answers【1-33】
    Spring bean依赖注入、bean的装配及相关注解
    【译】Spring 4 基于TaskScheduler实现定时任务(注解)
    【译】Spring 4 + Hibernate 4 + Mysql + Maven集成例子(注解 + XML)
    【译】Spring 4 @Profile注解示例
    【译】Spring 4 @PropertySource和@Value注解示例
    【译】Spring 4 自动装配、自动检测、组件扫描示例
  • 原文地址:https://www.cnblogs.com/aspirant/p/3533316.html
Copyright © 2020-2023  润新知