下面是一個表情列表,為了簡單我直接在li里面放圖片的文件名稱，而class 屬性用來存放對應(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>
接下來把上面的 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);
});
放一個 iframe 用來做編輯器
復(fù)制代碼 代碼如下:
iframe id="Edit" frameborder="0">/iframe>
先得到 ifame
復(fù)制代碼 代碼如下:
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設(shè)置了一個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>");
下面實現(xiàn)，在iframe 插入圖片表情的過程(代碼內(nèi)有注釋)
復(fù)制代碼 代碼如下:
$("#faceList>li").click(function(){
var $this = $(this);
var $thisImg = $(this).find("img:eq(0)"); //當(dāng)前點擊的表情（IMG標(biāo)記）
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 標(biāo)記
復(fù)制代碼 代碼如下:
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!=nullfs[0]!=undefined)
{
fs.replaceWith(mark);
}
});
}
其實還有很多問題沒有處理，俺也只是一知半解。把代碼貼出來希望能幫助一些朋友解決問題。
您可能感興趣的文章:- Android輸入框添加emoje表情圖標(biāo)的實現(xiàn)代碼
- Android高仿微信表情輸入與鍵盤輸入詳解
- Android編程開發(fā)之EditText實現(xiàn)輸入QQ表情圖像的方法
- Android編程開發(fā)實現(xiàn)TextView顯示表情圖像和文字的方法
- Android編程實現(xiàn)QQ表情的發(fā)送和接收完整實例(附源碼)
- 基于Android開發(fā)支持表情的實現(xiàn)詳解
- Android開發(fā)技巧之像QQ一樣輸入文字和表情圖像
- 使MySQL能夠存儲emoji表情字符的設(shè)置教程
- 基于jQuery實現(xiàn)的QQ表情插件
- 完整的Android表情功能處理方案
