最近在做項目的時候，有這么一個需求。pc端評論頁面的時候要能插入表情。并且還要能同步移動端的。心想這是什么鬼需求。起初想到采用百度的

富文本編輯器ueditor。但是他里面自帶的表情無法同步的移動端。

那怎么讓pc上的東西在移動端顯示呢。沒辦法。客戶就是上帝啊。客戶提的所有需求都要滿足。于是就在網上查找了有關資料。想到了采用

國際通用的emoji表情來作為web平臺的輸入。

這是我找的資料，講的還算詳細。但缺少具體實列。

參考資料

1.首先我們要把所有的emoji表情給顯示出來,好讓用戶進行選擇

這里是結構，樣式的話我就不列舉出來了。自行腦補吧

:)

2.接下來就是行為層了

通過按鈕觸發emoji表情，并把表情內容加載到emoji-cont中。

//生成emoji 并把emoji表情加載到emoji-cont中進行顯示。

$("#btn").click(function(){

$(".emoji-cont").html("");

$(".emoji-cont").stop().toggle();

renderEmoji();

$(".emoji-icon").each(function(k,v){

$(v).click(function(){

var code=$(this).attr("unicode16");

console.log(parse(code));

$("#content-icon").append(parse(""+parseInt(code,16)+";"));

});

});

});

function renderEmoji(){

var emos = getEmojiList()[0];

var html = '

• ';

for (var j= 0; j

var emo = emos[j];

var data = 'data:image/png;base64,' + emo[2];

if (j % 20 == 0) {

html += '

';

} else {

html += '

';

}

html += '

';

}

$(".emoji-cont").append(html);

}

//通過該方法。可以直接把表情在輸入框中顯示出來。

function parse(arg) {

if (typeof ioNull !='undefined') {

return ioNull.emoji.parse(arg);

}

return '';

};

以上這些都必須按依賴加載如下3個js文件

1.emoji-list-with-image.js 存儲emoji編碼和表情圖片數據，格式如["e415","1f604","iVBORw0KGg..."]

2.punycode.js 編碼解析庫

3.emoji.js 解析emoji編碼

如果覺得有幫助的話，麻煩右上角輕輕star下哦

有不足的地方，請各位大神指正！謝謝！

總結

以上是生活随笔為你收集整理的html显示emoji表情,在web页面显示emoji表情的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。