學習emoji

產品坑爹,什麼都要。
找了不少產品,能作到的支持emoji的很少。微博直接屏蔽,QQ空間不支持。但微信支持了,咱們就得作。
因而...css

是什麼


其實是一些unicodejquery


支持

(這塊理解的比較少)目前emoji的支持在不斷更新,各平臺的支持狀況也再隨着版本的更新支持越多。
iOS android的支持就比較好。windows就別說了。android

能夠打開http://emojipedia.org/new-emoji/看下系統的支持。
支持emoji的就能顯示圖標,支持不了的就顯示個框框
git

怎麼支持

國內emoji的支持還不是很主流。能夠暫且支持主流的emoji(例如微信裏面的emoji)。github

找到emoji,而後用圖片替換。
採用的方案是https://github.com/coocy/emoji。
優勢:web

  • 普通屏和高清屏分別是兩套圖片尺寸。20x20,40x40。windows

  • 不採用css sprites。若採用,則圖片太大。沒有必要,不少均可能沒有用到的。微信

  • 和文字大小保持一致,最大20px
    缺點:(通過使用,查看源碼)dom

  • 其emoji替換成圖片是用異步的,且會dom是全新的。這容易致使問題是以前dom綁定了些東西,會失效。異步

  • 沒有提供字符串替換的藉口。只能操做jquery dom。

因而我本身添加了同步和操做字符串的藉口。以便操做渲染以前的模板。

微信上用到的emoji

\ud83d\ude04|\ud83d\ude37|\ud83d\ude02|\ud83d\ude1d|\ud83d\ude32|\ud83d\ude33|\ud83d\ude31|\ud83d\ude1e|\ud83d\ude09|\ud83d\ude0c|\ud83d\ude12|\ud83d\udc7f|\ud83d\udc7b|\ud83d\udc9d|\ud83d\ude4f|\ud83d\udcaa|\ud83d\udcb0|\ud83c\udf82|\ud83c\udf89|\ud83c\udf81

demo 和 ueditor結合

http://liyatang.github.io/demo/editor/

轉成字符串

function toHex(str) {
     var res=[];
     for(var i=0;i < str.length;i++)               
          res[i]=("00"+str.charCodeAt(i).toString(16)).slice(-4);          
     return "\\u"+res.join("\\u");       }
相關文章
相關標籤/搜索