聊天應用中的表情插件

聊天應用中的表情插件

用於Web即時聊天應用的圖片表情插件，具備展現表情、插入表情和表情編解碼的功能

項目地址

看代碼

看demo

原理介紹

web端的即時聊天應用中看到的表情，其實就是一張張表情圖片，經過img標籤引用並展現在頁面上。在整個聊天的流程上主要有這幾個要點：

• 當用戶要發送表情時，首先要顯示錶情列表，讓用戶能夠從中選擇要發送的表情。而後經過插入表情的功能，將表情插入到當前光標所在的位置。這裏有一個小技巧，若是輸入框用<input type="text">的話，是沒法在輸入框中顯示錶情圖片的，這樣用戶沒法直觀的看到他想發送的表情。能夠使用H5中的新特性contenteditable，使div變爲可編輯狀態，就能夠顯示錶情圖片了。

• 用戶點擊了發送以後，將輸入框中的內容進行編碼，用戶輸入框中的內容應該相似於你好啊<img src="arclist/1.gif">，編碼以後會獲得你好啊[em_1]，就能夠將之發送或者存儲。

• 當用戶頁面讀取到聊天內容時，會獲得你好啊[em_1]這樣的字符串，其中[em_1]就是表情圖片對應的編碼，進行解碼後，[em_1]會解析成<img src="arclist/1.gif">，而後直接渲染到頁面中，用戶就能看到對應的表情圖片了。

代碼註釋比較詳細，使用的時候能夠根據項目的具體狀況，作一些適當的修改。