本文首發(fā)在我的個(gè)人博客上：http://brownbear.top
項(xiàng)目地址是:https://github.com/sobrown
最近在做項(xiàng)目的時(shí)候财边，有這么一個(gè)需求丧蘸。pc端評論頁面的時(shí)候要能插入表情抡锈。并且還要能同步移動(dòng)端的赞别。心想這是什么鬼需求。起初想到采用百度的
富文本編輯器ueditor拓劝。但是他里面自帶的表情無法同步的移動(dòng)端。
那怎么讓pc上的東西在移動(dòng)端顯示呢嘉裤。沒辦法郑临。客戶就是上帝啊价脾∧恋郑客戶提的所有需求都要滿足。于是就在網(wǎng)上查找了有關(guān)資料侨把。想到了采用
國際通用的emoji表情來作為web平臺(tái)的輸入。
這是我找的資料妹孙，講的還算詳細(xì)秋柄。但缺少具體實(shí)列。
參考資料
1.首先我們要把所有的emoji表情給顯示出來,好讓用戶進(jìn)行選擇
這里是結(jié)構(gòu)蠢正，樣式的話我就不列舉出來了骇笔。自行腦補(bǔ)吧
<div class="text">
<div id="content-icon" contenteditable="true" class="icon-area"></div>
<button id="btn" class="btn btn-sm btn-default">:)</button>
<div class="emoji-cont"></div>
</div>
2.接下來就是行為層了
通過按鈕觸發(fā)emoji表情，并把表情內(nèi)容加載到emoji-cont中嚣崭。
//生成emoji 并把emoji表情加載到emoji-cont中進(jìn)行顯示笨触。
$("#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 = '<ul class="clearfix">';
for (var j= 0; j<emos.length; j++){
var emo = emos[j];
var data = 'data:image/png;base64,' + emo[2];
if (j % 20 == 0) {
html += '<li class="">';
} else {
html += '<li>';
}
html += '<img style="display: inline;vertical-align: middle;" src="' + data + '" unicode16="' + emo[1] + '" class="emoji-icon" /></li>';
}
$(".emoji-cont").append(html);
}
//通過該方法”⒁ǎ可以直接把表情在輸入框中顯示出來芦劣。
function parse(arg) {
if (typeof ioNull !='undefined') {
return ioNull.emoji.parse(arg);
}
return '';
};
以上這些都必須按依賴加載如下3個(gè)js文件
1.emoji-list-with-image.js 存儲(chǔ)emoji編碼和表情圖片數(shù)據(jù)，格式如["e415","1f604","iVBORw0KGg..."]
2.punycode.js 編碼解析庫
3.emoji.js 解析emoji編碼
如果覺得有幫助的話说榆，麻煩右上角輕輕star下哦
有不足的地方虚吟，請各位大神指正寸认！謝謝！
