GitHub Flavored Markdown
今天研究了一天Markdown移動端和pc端統(tǒng)一實(shí)現(xiàn)方式,由于以前有搞過移動端富文本編輯器,搞Markdown簡單多了;
其中GFM的表情語法不錯,比如笑臉:smile:,準(zhǔn)備采用一下。
又想到了手機(jī)輸入法輸入表情瀏覽器頁面接收到的是一個字符,如果能轉(zhuǎn)換成:smile:就更能統(tǒng)一表現(xiàn)了,就像微信Android怎么輸入輸入法里面奇丑的emoji到了微信里面都是微信自帶的好看的emoji圖標(biāo),其實(shí)這個轉(zhuǎn)換好幾年前就有開始了解,不過沒有什么進(jìn)展。
編碼問題
前幾天剛好有需求要把emoji對應(yīng)的Unicode編碼轉(zhuǎn)換成文字,比如1f601對應(yīng)的這個笑臉??,但沒有找到C#的把1f601轉(zhuǎn)換成文字的方法,用Encoding.Unicode怎么轉(zhuǎn)換都不對,最后直接復(fù)制emoji字符,Visual Studio里面竟然直接顯示出來了,那就直接用字符吧,都不用轉(zhuǎn)換了,然后不了了之了。
今天搞Markdown編輯器,由于前面GFM的原因,又對編碼進(jìn)行測試,沒查到什么靠譜資料,到時找到很多emoji和Unicode對照表,https://apps.timwhitlock.info/emoji/tables/unicode
拿一個笑臉https://apps.timwhitlock.info/unicode/inspect/hex/1F601
開刀~
正確姿勢
【C#】
Encoding.UTF32.GetBytes("??")
->
["1", "f6", "1", "0"]
【js】
"??".codePointAt(0).toString(16)
->
1f601
UTF-32結(jié)果一致
【C#】
Encoding.UTF8.GetBytes("??")
->
["f0", "9f", "98", "81"]
【js】
encodeURIComponent("??")
->
%F0%9F%98%81
UTF-8結(jié)果一致
錯誤姿勢
【C#】
Encoding.Unicode.GetBytes("??")
->
["3d", "d8", "1", "de"]
【js】
"??".codePointAt(0).toString(16)
->
1f601
這個Unicode反而不一致了
其實(shí)前段時間一直轉(zhuǎn)換不對,就是錯怪Encoding.Unicode了,C#里面Encoding.Unicode=Little-Endian UTF-16
沒錯是UTF-16,四字節(jié)編碼老實(shí)用UTF-32就和瀏覽器結(jié)果一致了。
好開森,記錄嘚瑟一下
Java是不是這樣就搞不清楚了,電腦內(nèi)存小了點(diǎn)就不開Eclipse敲代碼了。
有了正確的轉(zhuǎn)換關(guān)系,不管前端對用戶輸入進(jìn)行替換還是后端替換都能實(shí)現(xiàn)了。下一步制作GFM emoji名字和Unicode編碼對照表,挑幾十個emoji放到編輯器菜單,剩余的只提供圖片。
關(guān)鍵是素材GitHub提供了https://github.com/WebpageFX/emoji-cheat-sheet.com/tree/master/public/graphics/emojis
,清晰度還不錯,手機(jī)上三倍縮放應(yīng)該挺清晰,直接拿來用