復制代碼代碼如下:
<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(){ //展現表情
var node = document.createElement("img");
node.className = $(this).attr("class");
node.src = faceDir+$(this).html();
this.innerHTML = "";
this.appendChild(node);
});
放一個 iframe 用來做編輯器
復制代碼代碼如下:
<iframe id="Edit" frameborder="0"></iframe>
先得到 ifame
復制代碼代碼如下:
iframeWindow = document.getElementById("Edit").contentWindow;iframeDocument = document.getElementById("Edit").contentWindow.document; iframeDocument.designMode="On"; //打開iframe 編輯模式
.designMode="On"; 這個方法還是蠻常見的。 剛開始做的時候還想用 textarea 但是textarea不能顯示圖片。這里在實際過程中發現與 textarea 的一個差異，iframe 內不會自己換行，所以為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>");
下面實現，在iframe 插入圖片表情的過程(代碼內有注釋)
復制代碼代碼如下:
$("#faceList>li").click(function(){
var $this = $(this);
var $thisImg = $(this).find("img:eq(0)"); //當前點擊的表情（IMG標記）
document.getElementById("Edit").contentWindow.focus(); //使編輯區域得到焦點
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;
//在內存中Copy一個該節點副本，以保全文檔流格式
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);
}
});
}
其實還有很多問題沒有處理，俺也只是一知半解。把代碼貼出來希望能幫助一些朋友解決問題。
