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

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

":""; this.ed.write(""+div+""); this.ed.close(); this.ed.contenteditable = true; this.ed.designmode = "on";//设置编辑区为可编辑 for(var i = 0,l = data.length;i连接地址