下面是一個(gè)表情列表,為了簡(jiǎn)單我直接在li里面放圖片的文件名稱，而class 屬性用來(lái)存放對(duì)應(yīng)的標(biāo)記
復(fù)制代碼 代碼如下:
ul id="faceList">
li class="wx">0.gif/li>
li class="pz">1.gif/li>
li class="se">2.gif/li>
/ul>
接下來(lái)把上面的 li 變成 img
復(fù)制代碼 代碼如下:
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);
});
放一個(gè) iframe 用來(lái)做編輯器
復(fù)制代碼 代碼如下:
iframe id="Edit" frameborder="0">/iframe>
先得到 ifame
復(fù)制代碼 代碼如下:
iframeWindow = document.getElementById("Edit").contentWindow;iframeDocument = document.getElementById("Edit").contentWindow.document; iframeDocument.designMode="On"; //打開(kāi)iframe 編輯模式
.designMode="On"; 這個(gè)方法還是蠻常見(jiàn)的。 剛開(kāi)始做的時(shí)候還想用 textarea 但是textarea不能顯示圖片。這里在實(shí)際過(guò)程中發(fā)現(xiàn)與 textarea 的一個(gè)差異，iframe 內(nèi)不會(huì)自己換行，所以為iframe 添加了一個(gè)body設(shè)置了一個(gè)word-wrap屬性
復(fù)制代碼 代碼如下:
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>");
下面實(shí)現(xiàn)，在iframe 插入圖片表情的過(guò)程(代碼內(nèi)有注釋)
復(fù)制代碼 代碼如下:
$("#faceList>li").click(function(){
var $this = $(this);
var $thisImg = $(this).find("img:eq(0)"); //當(dāng)前點(diǎn)擊的表情（IMG標(biāo)記）
document.getElementById("Edit").contentWindow.focus(); //使編輯區(qū)域得到焦點(diǎn)
var r = null;
if(document.selection) //處理兼容性問(wèn)題
{
//把表情放入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);
}
});
到這里，就完成了插入表情的過(guò)程。還有最后一件事情：翻譯img 標(biāo)記
復(fù)制代碼 代碼如下:
function GeteEditData()
{
var edit = iframeDocument.getElementsByTagName("body")[0].innerHTML;
//在內(nèi)存中Copy一個(gè)該節(jié)點(diǎn)副本，以保全文檔流格式
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!=nullfs[0]!=undefined)
{
fs.replaceWith(mark);
}
});
}
其實(shí)還有很多問(wèn)題沒(méi)有處理，俺也只是一知半解。把代碼貼出來(lái)希望能幫助一些朋友解決問(wèn)題。
您可能感興趣的文章:- Android輸入框添加emoje表情圖標(biāo)的實(shí)現(xiàn)代碼
- Android高仿微信表情輸入與鍵盤(pán)輸入詳解
- Android編程開(kāi)發(fā)之EditText實(shí)現(xiàn)輸入QQ表情圖像的方法
- Android編程開(kāi)發(fā)實(shí)現(xiàn)TextView顯示表情圖像和文字的方法
- Android編程實(shí)現(xiàn)QQ表情的發(fā)送和接收完整實(shí)例(附源碼)
- 基于Android開(kāi)發(fā)支持表情的實(shí)現(xiàn)詳解
- Android開(kāi)發(fā)技巧之像QQ一樣輸入文字和表情圖像
- 使MySQL能夠存儲(chǔ)emoji表情字符的設(shè)置教程
- 基于jQuery實(shí)現(xiàn)的QQ表情插件
- 完整的Android表情功能處理方案
