javascript 在線文本編輯器實現代碼

更新時間：2010年03月04日 18:48:23 作者：

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   class="wppm3vysvbp"   id='ss'></div> <div   class="wppm3vysvbp"   id='sss'></div>  </body </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章: