菜雞一只，剛開始寫博客文筆不好，有問題歡迎相互討論。閑話不多說。
用到了三個插件
Emoji Picker
第一步
這個emoji表情包插件是我找到比較好 的一個，input框中是不能放入圖片的，效果的原理是div設置contenteditable=“true”即可編輯，input和div相互賦值，當獲取input或textarea時 獲取的事字符串和純文本圖形。
項目中遇到的問題：因為這個插件是點笑臉彈出一個表情框但是項目中只有一個按鈕 要實現標題與內容。
解決的辦法：通過判斷哪個框fous 顯示出相應的笑臉按鈕。
第二步
發送數據給后端兩種方法
1.轉為Unicode編碼
2.轉為shortname :smile: 這樣的格式 轉換插件 https://github.com/hikitty2/emojione 這是一個轉換編碼和表情的庫，安裝只需要兩條cdn就可以 只不過表情不是emoji （通過這個插件把純文本圖形轉成了shortname ）
第三步
由於我用耳的angular框架 使用了angular-emoji-filter https://github.com/globaldev/angular-emoji-filter
項目中遇到的問題:這個angular插件是是通過雪碧圖來定位圖片然而 每個圖標只有21px 非常小 所幸該插件自帶了一套每個圖標的圖片並且支持自己調px 但是需要用到gruntfile
修改gruntfile
提一個坑，在安裝grunt 的一個插件 Grunt Montage時npm就下不來了 不知道是什么原因可能和node npm的版本有關 最后用了cnpm 淘寶的鏡像 下來了。
第二個坑 運行grunt css的定位和js成功生成 但是整個表情包的雪碧圖沒生成= = 使用了雪碧圖合成把angular-emoji-filter中自帶的圖片全部拖入生成雪碧圖每個圖標是32 但是有兩張老鼠圖片是38px建議刪除不然定位會出問題 http://alloyteam.github.io/gopng/
不用angular過濾器的 jq也有一個過濾unicode編碼的插件 自帶圖片 可以直接百度
到此問題基本解決，大家又好的方法歡迎留言