一款支持插入表情的編輯器實現(xiàn)代碼(簡單思路挺重要)

更新時間：2010年07月17日 18:21:17 作者：

先說做的是什么哈。一個發(fā)言框，功能不多。要求能插入表情，最終得到的代碼表情不是<img>標記，而是類似 /:haha 的表情代碼。項目做的時候有些部分用了Jquery直接上代碼了

下面是一個表情列表,為了簡單我直接在li里面放圖片的文件名稱，而class 屬性用來存放對應的標記

復制代碼代碼如下:

 
<ul id="faceList"> 
<li class="wx">0.gif</li> 
<li class="pz">1.gif</li> 
<li class="se">2.gif</li> 
</ul> 

接下來把上面的 li 變成 img

復制代碼代碼如下:

 
var faceDir = "images/"; //配置表情目錄 
var iframeDocument = null; 
var iframeWindow = null; 
var isIe = false; 
$.each($("#faceList>li"), function(){ //展現(xiàn)表情 
var node = document.createElement("img"); 
node.className = $(this).attr("class"); 
node.src = faceDir+$(this).html(); 
this.innerHTML = ""; 
this.appendChild(node); 
}); 

放一個 iframe 用來做編輯器

復制代碼代碼如下:

先得到 ifame

復制代碼代碼如下:

 
iframeWindow = document.getElementById("Edit").contentWindow;iframeDocument = document.getElementById("Edit").contentWindow.document; iframeDocument.designMode="On"; //打開iframe 編輯模式 

.designMode="On"; 這個方法還是蠻常見的。剛開始做的時候還想用 textarea 但是textarea不能顯示圖片。這里在實際過程中發(fā)現(xiàn)與 textarea 的一個差異，iframe 內(nèi)不會自己換行，所以為iframe 添加了一個body設置了一個word-wrap屬性

復制代碼代碼如下:

 
iframeDocument.write("<html><body style=\"word-wrap:break-word;text-align: left; background-color: #fff; border:1px solid #CCC; margin:0px; padding:0px;overflow:hidden;\"></body></html>"); 

下面實現(xiàn)，在iframe 插入圖片表情的過程(代碼內(nèi)有注釋)

復制代碼代碼如下:

 
$("#faceList>li").click(function(){ 
var $this = $(this); 
var $thisImg = $(this).find("img:eq(0)"); //當前點擊的表情（IMG標記） 
document.getElementById("Edit").contentWindow.focus(); //使編輯區(qū)域得到焦點 
var r = null; 
if(document.selection) //處理兼容性問題 
{ 
//把表情放入iframe 
r = iframeDocument.selection.createRange(); 
iframeDocument.selection.empty(); 
r.pasteHTML($thisImg[0].parentNode.innerHTML.toString()); 
} 
else if(window.getSelection) 
{ 
r = iframeWindow.getSelection().getRangeAt(0); 
iframeWindow.getSelection().removeAllRanges(); 
var node = document.createElement("img"); 
node.className = $thisImg.attr("class"); 
node.src = $thisImg.attr("src"); 
r.surroundContents(node); 
} 
}); 

到這里，就完成了插入表情的過程。還有最后一件事情：翻譯img 標記

復制代碼代碼如下:

 
function GeteEditData() 
{ 
var edit = iframeDocument.getElementsByTagName("body")[0].innerHTML; 
//在內(nèi)存中Copy一個該節(jié)點副本，以保全文檔流格式 
var str = new String(edit); 
var $content = $("<div>"+str+"</div>"); 
var imgNode = $("#faceList img"); 
$.each(imgNode, function(){ 
var mark= "/:"+$(this).attr("class").toString(); 
var fs = $content.find("."+$(this).attr("class").toString()); 
if(fs!=null&&fs[0]!=undefined) 
{ 
fs.replaceWith(mark); 
} 
}); 
} 