Emoji表情在web端的展示步驟詳解!!!

1、先上張圖片,給大家看看需求是什麼樣的:


要求在安卓端或是iOS端上添加的emoji表情要能在web端進行展示出來。


2、拿到這種需求,對於底層的程序員來說,沒辦法以前沒接觸過,我只在鬥圖中見它們的次數比較多,所以只能去尋找度孃的幫助,你知道的,度娘給我們展示的一般都是比較高級的。所以一般文字太多的比較看不懂,尤其是講述一些編碼的問題,我更是不懂,所以還是手把手的教程比較靠譜。


3、我開始從數據庫中拿到的數據是這樣的

我展示出來的效果也是這樣的,帶一些小框框,這怎麼能忍受的了,果斷去尋找解決的辦法。


4、最終,I get it  ,下面我講述一些解決的辦法。


5、首先引入,emoji.css  emoji.js   emoji.png這三個文件。記住這三個資源文件是在同一層的,並且千萬別忘記引用.png圖片,因爲表情的展示全靠它呢。



這裏看到了沒,最關鍵的代碼,其中$('.remark-edit')是你用來展示表情的div,記住div裏存放的是展示表情和字符串的文本,不能有其他的標籤在裏面,我試了會出錯,不過也肯定能解決,我沒嘗試哈,大家可以試試看。

emoji.unifiedToHTML(html)就是調用emoji.js裏的表情解析方法,我用的是avalon引入js的方法,如果想直接引入,你可以用emoji.js裏的對象




如果要進行發送評論的時候要注意對emoji表情進行反解析,也就是過濾掉span標籤,進行還原爲原始的數據,看下圖所示:




就是這個來去調用,好了,就說這些,趕緊去嘗試吧!


資源文件下載地址:http://download.csdn.net/detail/huangxingzhe/9089255


參考文章:https://github.com/node-modules/emoji/tree/master/lib


發佈了70 篇原創文章 · 獲贊 101 · 訪問量 32萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章