菜鸡一只,刚开始写博客文笔不好,有问题欢迎相互讨论。闲话不多说。
用到了三个插件
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建议删除不然定位会出问题
不用angular过滤器的 jq也有一个过滤unicode编码的插件 自带图片 可以直接百度
到此问题基本解决,大家又好的方法欢迎留言