1、先上张图片,给大家看看需求是什么样的:
要求在安卓端或是iOS端上添加的emoji表情要能在web端进行展示出来。
2、拿到这种需求,对于底层的程序员来说,没办法以前没接触过,我只在斗图中见它们的次数比较多,所以只能去寻找度娘的帮助,你知道的,度娘给我们展示的一般都是比较高级的。所以一般文字太多的比较看不懂,尤其是讲述一些编码的问题,我更是不懂,所以还是手把手的教程比较靠谱。
我展示出来的效果也是这样的,带一些小框框,这怎么能忍受的了,果断去寻找解决的办法。
4、最终,I get it ,下面我讲述一些解决的办法。
5、首先引入,emoji.css emoji.js emoji.png这三个文件。记住这三个资源文件是在同一层的,并且千万别忘记引用.png图片,因为表情的展示全靠它呢。
这里看到了没,最关键的代码,其中$('.remark-edit')是你用来展示表情的div,记住div里存放的是展示表情和字符串的文本,不能有其他的标签在里面,我试了会出错,不过也肯定能解决,我没尝试哈,大家可以试试看。
emoji.unifiedToHTML(html)就是调用emoji.js里的表情解析方法,我用的是avalon引入js的方法,如果想直接引入,你可以用emoji.js里的对象
如果要进行发送评论的时候要注意对emoji表情进行反解析,也就是过滤掉span标签,进行还原为原始的数据,看下图所示:
就是这个来去调用。