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

用到了三个插件

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

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

项目中使用emoji表情包与表情的解析过程详情的更多相关文章

  1. ssm项目中遇到微信用户名称带有表情,插入失败问题

    ssm项目中遇到微信用户名称带有表情,插入失败问题 问题 Mysql的utf8编码最多3个字节,而Emoji表情或者某些特殊字符是4个字节. 因此会导致带有表情的昵称插入数据库时出错. 解决方法 一. ...

  2. 关于如何正确地在android项目中添加第三方jar包

    在android项目中添加第三方jar包虽然不是一个很复杂的问题,但是确实给很多开发者带来了不小的困扰.我自己就曾经碰到过calss not found exception.error inflati ...

  3. Android Studio 在项目中引用第三方jar包

    在Android Studio项目中引用第三方jar包的方法: 步骤: 1.在build.gradle文件中添加如下代码: 备注:要添加在Android作用域下 sourceSets { main { ...

  4. Nexus-在项目中使用Maven私服,Deploy到私服、上传第三方jar包、在项目中使用私服jar包

    场景 Ubuntu Server 上使用Docker Compose 部署Nexus(图文教程): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...

  5. idea在maven中引入了jar包依赖,但是编译过程中报出XXX程序包不存在,已解决

    idea在maven中引入了jar包依赖,但是编译过程中报出XXX程序包不存在 1. 报错具体情况 2. Project Structure中的Libraries没有任何红色波浪线 3. 发现自己要引 ...

  6. VS项目中使用Nuget还原包后编译生产还一直报错?

    Nuget官网下载Nuget项目包的命令地址:https://www.nuget.org/packages 今天就遇到一个比较奇葩的问题,折腾了很久终于搞定了: 问题是这样的:我的解决方案原本是好好的 ...

  7. 在maven项目中解决第三方jar包依赖的问题

    在maven项目中,对于那些在maven仓库中不存在的第三方jar,依赖解决通常有如下解决方法: 方法1:直接将jar包拷贝到项目指定目录下,然后在pom文件中指定依赖类型为system,如: < ...

  8. java将类和函数封装成jar,然后在别的项目中使用这个jar包

    本来想用idea安装的,不过用maven生成后发现jar有20,30M肯定不对,后来还是用eclipse生成了,方便很多 环境: eclipse luna,jdk1.8_112 1.生成jar包,首先 ...

  9. web项目中遇到的Maven包依赖冲突问题解决

      在搭建web项目时,出现一个比较诡异的问题,任何JSP页面突然都不能够正常地显示,系统爆出HTTP:500(服务器内部错误)的页面   HTTP Status 500 - java.lang.No ...

随机推荐

  1. 内存屏障 &amp; Memory barrier

    Memory Barrier http://www.wowotech.net/kernel_synchronization/memory-barrier.html 这里面讲了Memory Barrie ...

  2. Base64编码格式详解

    什么是Base64? 按照RFC2045的定义,Base64被定义为:Base64内容传送编码被设计用来把任意序列的8位字节描述为一种不易被人直接识别的形式.(The Base64 Content-T ...

  3. mysql源码重启

    1.通过rpm包安装的MySQL service mysqld restart /etc/inint.d/mysqld start 2.从源码包安装的MySQL // linux关闭MySQL的命令 ...

  4. android 利用Bitmap获取圆角矩形、圆形图片

    1.在很多时候,我们要显示图片资源,需要将他的资源显示为圆角的:示例源码如下: public static Bitmap getRoundedCornerBitmap(Bitmap bitmap,fl ...

  5. idea快捷

    IntelliJ Idea 常用快捷键 列表(实战终极总结!!!!) 1. -----------自动代码-------- 常用的有fori/sout/psvm+Tab即可生成循环.System.ou ...

  6. c/c++再学习:查找算法了解

    1.顺序查找 说明:顺序查找适合于存储结构为顺序存储或链接存储的线性表. 基本思想:顺序查找也称为线形查找,属于无序查找算法.从数据结构线形表的一端开始,顺序扫描,依次将扫描到的结点关键字与给定值k相 ...

  7. 【JavaScript从入门到精通】第四课初探JavaScript魅力-04

    第四课初探JavaScript魅力-04 style与className 之前我们已经讲过,style用于在JS里控制元素的样式,通过style可以选中元素的各种css属性.此外,我们也提到过,JS用 ...

  8. Spring事务管理的四种方式(以银行转账为例)

    Spring事务管理的四种方式(以银行转账为例) 一.事务的作用 将若干的数据库操作作为一个整体控制,一起成功或一起失败.   原子性:指事务是一个不可分割的工作单位,事务中的操作要么都发生,要么都不 ...

  9. 如何使用PowerDesigner设计数据库关系模式

    /*==============================================================*/ /* DBMS name: Microsoft SQL Serve ...

  10. cocos2d-x学习之旅(五):1.5 使用eclipse编译cocos2d-x示例项目,创建cocos2d-x android项目并部署到真机

    今天将cocos2d-x的示例项目tests编译到android真机运行,以及如何创建cocos2d-x的android项目. 打开cocos2d-x的tests项目,路径为:D:\cocos2d-x ...