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