javascript 在线文本编辑器

javascript 在线文本编辑器实现代码。

效果例如以下：

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcGhwZmVuZ2h1bw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast" alt="">

<!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>

javascript 在线文本编辑器的更多相关文章

JavaScript 实现文本编辑器
JavaScript 实现文本编辑器最近,我需要做一个非常基本的网页内容编辑功能.我不想使用 iframe ,我也不想要一个功能特别多的复杂编辑器,只需要很基本的内容编辑功能,例如粗体,斜体,列表, ...
基于jquery的bootstrap在线文本编辑器插件Summernote
Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线编辑器.Summernote非常的轻量级,大小只有30KB,支持Safari,Chrome,Firefox.Op ...
Jquery的bootstrap在线文本编辑器插件Summernote
http://www.jqcool.net/demo/201407/bootstrap-summernote/ Summernote是一个基于jquery的bootstrap超级简单WYSIWYG在线 ...
10个免费的javascript富文本编辑器（jQuery and non-jQuery）
祝愿园子里的朋友圣诞节快乐. 本文介绍了10个免费易用富文本编辑器(rich text editors,RTE),其中5个是Jquery插件,另外5个是非Jquery富文本编辑器简介 Javascr ...
Javascript富文本编辑器
分享几款Javascript富文本编辑器 ueditor jqframework xheditor htmlbox kindeditor wymeditor jhtmlarea markitup ck ...
$Django 在线文本编辑器skindeditor
简介 KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富 ...
javascript 简易文本编辑器
转载请注明出处:http://www.cnblogs.com/enzozo/p/4357031.html 写在前面: 本文本编辑器具备功能:选择字体大小.颜色.加粗.斜体.下划线.点击 'Submit ...
关于在线文本编辑器防XSS注入攻击问题
跨站脚本攻击,又称XSS代码攻击,也是一种常见的脚本注入攻击.例如在下面的界面上,很多输入框是可以随意输入内容的,特别是一些文本编辑框里面,可以输入例如<script>alert('这是一 ...
JavaScript 富文本编辑器
WEB项目中使用UEditor(富文本编辑器) UEditor - 完整示例 http://ueditor.baidu.com/website/onlinedemo.html UEditor注意事项: ...

随机推荐

Jmeter下载安装配置
一,进入官网:http://jmeter.apache.org/ 1.第一步进入官网如下图 2.选择进行下载,下载下来为一个压缩包,解压即可. 3.我下载的是jmeter4.0版本,对应jdk1.8. ...
【LeetCode】Remove Nth Node From End of List(删除链表的倒数第N个节点)
这道题是LeetCode里的第19道题. 题目要求: 给定一个链表,删除链表的倒数第 n 个节点,并且返回链表的头结点. 示例: 给定一个链表: 1->2->3->4->5, ...
【LeetCode】Maximize Sum Of Array After K Negations(K 次取反后最大化的数组和)
这道题是LeetCode里的第1005道题. 题目描述: 给定一个整数数组 A,我们只能用以下方法修改该数组:我们选择某个个索引 i 并将 A[i] 替换为 -A[i],然后总共重复这个过程 K 次. ...
NYOJ 311 完全背包
完全背包时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述直接说题意,完全背包定义有N种物品和一个容量为V的背包,每种物品都有无限件可用.第i种物品的体积是c,价值是 ...
利用pytorch复现spatial pyramid pooling层
sppnet不讲了,懒得写...直接上代码 from math import floor, ceil import torch import torch.nn as nn import torch.n ...
zoj 1760 Doubles
Doubles Time Limit: 2 Seconds Memory Limit: 65536 KB As part of an arithmetic competency progra ...
[uiautomator篇] bluetooth---接口来做
package com.softwinner.performance.frameratetest; import android.Manifest; import android.bluetooth. ...
组合数学的卡特兰数 TOJ 3551: Game of Connections
这个就是卡特兰数的经典问题直接用这个公式就好了,但是这个题涉及大数的处理h(n)=h(n-1)*(4*n-2)/(n+1) 其实见过好几次大数的处理了,有一次他存的恰好不多于30位,直接分成两部分l ...
jsessionid 所引起的404问题和解决方法
问题: 在SpringMvc使用RedirectView或者"redirect:"前缀来做重定向时,Spring MVC最后会调用: response.sendRedirect(r ...
zabbix的安装（一）监控os资源：内存，cpu，io，负载，带宽
一.Linux下开源监控系统简单介绍1)cacti:存储数据能力强,报警性能差2)nagios:报警性能差,存储数据仅有简单的一段可以判断是否在合理范围内的数据长度,储存在内存中.比如,连续采样数据存 ...

javascript 在线文本编辑器

javascript 在线文本编辑器的更多相关文章

随机推荐

热门专题