项目中使用emoji表情包与表情的解析过程详情

菜鸡一只，刚开始写博客文笔不好，有问题欢迎相互讨论。闲话不多说。

 

用到了三个插件

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编码的插件 自带图片 可以直接百度

 

 

到此问题基本解决，大家又好的方法欢迎留言