为网站添加emoji表情的支持
Posted 遇到不会的多学习!
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为网站添加emoji表情的支持相关的知识,希望对你有一定的参考价值。
- 项目框架
- React.js + webpack + ES6 + Jquery
- 需求描述
- 使用客户端的用户常常喜欢发emoji表情,而在浏览器打开网页版的时候,emoji表情不能正常显示。在chrome下,emoji表情显示的是黑白的线框表情。
- 因此需要通过前端来实现所有浏览器的emoji表情显示支持。
- github上关于emoji的开源方案的尝试
twemoji |
Twitter的开源项目 http://twitter.github.io/twemoji ,是目前应用最广泛的,很多其它的开源方案都是基于它来实现的。 项目主页 https://twemoji.maxcdn.com/ 通过script标签加一个js文件就可以使用twemoji了。 twemoji.parse函数既可以处理文本(将文本中的emoji的code转变为相应的img标签), 也可以处理DOM(通过document.createDocumentFragment()将现有的DOM中的emoji code转变为img标签,再通过appenchild加载到页面上)。 问题:twemoji对DOM的操作不适合React框架,而且只能在window.onload之后执行; 服务器是在国外,表情的图片加载的比较慢,js有放到cdn上的版本就会好一些。 最后我选用了twemoji的处理文本的方案。之后会考虑将js做些修改,把js和表情图片放到网站服务器上提高请求速度。 附加一篇简易的使用教程 https://blog.farrant.me/adding-emoji-support-to-any-website/ |
emojify |
MIT的开源项目 http://hassankhan.github.io/emojify.js/ 同样是js模块,但是表情包使用的是一整张大的sheet,而不是分别请求单个表情。一整张真的很大啊! 有多个不同版本表情包可以切换 具体使用我没有多做了解 |
react-emoji |
https://github.com/banyan/react-emoji https://www.npmjs.com/package/react-emoji 用于React框架的npm moudle 有两个版本的表情包 我在尝试使用的时候发现了以下问题: 需要通过Class的mixins属性来使用这个模块,而在ES6的class写法中是不支持mixins,因此放弃了这个方案
|
react-emojify |
https://github.com/pladaria/react-emojione https://www.npmjs.com/package/react-emojify MIT出品 这是一个支持React ES6的npm moudle 感觉这个还不错,以后可以更深入的了解和试用一下 |
更多类型的emoji开源项目 |
https://github.com/showcases/emoji 还有一个程序员哥哥自己把twemoji应用到react的方案 https://blog.datawallet.io/emojis-in-react-d733d3ae120b#.mxsnegimp react-easy-emoji https://github.com/appfigures/react-easy-emoji#readme 感觉也不错 |
以上是关于为网站添加emoji表情的支持的主要内容,如果未能解决你的问题,请参考以下文章