近期需開發一個DIV做的編輯器，插入表情圖片可直接預覽效果，仔細參考了下百度貼吧的過濾粘貼過來文件的THML代碼，自己整理了下。寫出來只是和大家分享下，我自己也不大懂，經過努力，幸好搞定。
蛋疼的事情出來了，當編輯框失去焦點時候，再插入圖片時候總是插入在最前面（谷歌和火狐，IE沒問題）。還沒搞定，，，
<!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-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>DIV可編輯框鼠標光標處插入圖片或者文字。</title> <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js "></script> <script type="text/javascript"> $(function(){ $(".imgbox img").click(function(){ $("#testdiv").focus(); var sy = $(".imgbox img").index(this) + 1; var img_url = "<img src='faceimg/"+sy+".gif'>"; /*此處如果不是插入圖片可這樣： var img_url = "插入測試的文字"; */ _insertimg(img_url); }) //注：如果要插入的是那種“快捷發言，快捷留言”里的文字，只需把那些文字都分別放在A標簽里即可，然后img_url=a標簽里面的內容。工作中的編輯器終於搞定！能插入圖片和快捷發言和表情圖片等。 }) //監控粘貼(ctrl+v),如果是粘貼過來的東東，則替換多余的html代碼，只保留<br> function pasteHandler(){ setTimeout(function(){ var content = document.getElementById("testdiv").innerHTML; valiHTML=["br"]; content=content.replace(/_moz_dirty=""/gi, "").replace(/\[/g, "[[-").replace(/\]/g, "-]]").replace(/<\/ ?tr[^>]*>/gi, "[br]").replace(/<\/ ?td[^>]*>/gi, " ").replace(/<(ul|dl|ol)[^>]*>/gi, "[br]").replace(/<(li|dd)[^>]*>/gi, "[br]").replace(/<p [^>]*>/gi, "[br]").replace(new RegExp("<(/?(?:" + valiHTML.join("|") + ")[^>]*)>", "gi"), "[$1]").replace(new RegExp('<span([^>]*class="?at"?[^>]*)>', "gi"), "[span$1]").replace(/<[^>]*>/g, "").replace(/\[\[\-/g, "[").replace(/\-\]\]/g, "]").replace(new RegExp("\\[(/?(?:" + valiHTML.join("|") + "|img|span)[^\\]]*)\\]", "gi"), "<$1>"); if(!$.browser.mozilla){ content=content.replace(/\r?\n/gi, "<br>"); } document.getElementById("testdiv").innerHTML=content; },1) } //鎖定編輯器中鼠標光標位置。。 function _insertimg(str){ var selection= window.getSelection ? window.getSelection() : document.selection; var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0); if (!window.getSelection){ document.getElementById('testdiv').focus(); var selection= window.getSelection ? window.getSelection() : document.selection; var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0); range.pasteHTML(str); range.collapse(false); range.select(); }else{ document.getElementById('testdiv').focus(); range.collapse(false); var hasR = range.createContextualFragment(str); var hasR_lastChild = hasR.lastChild; while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") { var e = hasR_lastChild; hasR_lastChild = hasR_lastChild.previousSibling; hasR.removeChild(e) } range.insertNode(hasR); if (hasR_lastChild) { range.setEndAfter(hasR_lastChild); range.setStartAfter(hasR_lastChild) } selection.removeAllRanges(); selection.addRange(range) } } //監控按enter鍵和空格鍵，如果按了enter鍵，則取消原事件，用<BR/ >代替。此處還等待修改！！！！！！如果后端能實現各個瀏覽器回車鍵產生的P，div, br的輸出問題話就無需采用這段JS、 function enterkey(){ e = event.keyCode; if (e==13||e==32) { var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode; event.returnValue = false; // 取消此事件的默認操作 if(document.selection && document.selection.createRange){ var myRange = document.selection.createRange(); myRange.pasteHTML('<br />'); }else if(window.getSelection){ var selection = window.getSelection(); var range = window.getSelection().getRangeAt(0); range.deleteContents(); var newP = document.createElement('br'); range.insertNode(newP); } //alert(document.getElementById("testdiv").innerHTML) } } </script> <style type="text/css"> .editbox{width:400px;height:200px;border:1px solid #000; overflow-x:hidden; overflow-y:auto; outline:none;} .editbox img{ margin:0 3px; display:inline;} </style> </head> <body> <div id="testdiv" contenteditable="true" class="editbox" onkeydown="enterkey()" >可以在任意文字后面插入圖片或者文字哦！<br /></div> <div class="imgbox"> <img src="faceimg/1.gif"> <img src="faceimg/2.gif"> <img src="faceimg/3.gif"> <img src="faceimg/4.gif"> </div> <script type="text/javascript"> //此處必須防止在最下端。 var edt = document.getElementById("testdiv"); if(edt.addEventListener){ edt.addEventListener("paste",pasteHandler,false); }else{ edt.attachEvent("onpaste",pasteHandler); } </script> </body> </html>
轉載地址:http://hi.baidu.com/louve01/item/efb14e1add258f6b3f87cedb