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

2024-12-06 16:40:51

Editor

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;
}

":"";
this.ed.write("body{margin:5px;font-size:16px;word-wrap:break-word}"+div+"");
this.ed.close();
this.ed.contentEditable = true;
this.ed.designMode = "on";//设置编辑区为可编辑
for(var i = 0,l = data.length;i连接地址　

"
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 = "

行数：　列数：

表格的宽度： px

表行的高度： px

　

"
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

";
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 = '';
}
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());
}