为网站添加emoji表情的支持

  • 项目框架
    • React.js + webpack + ES6 + Jquery
  • 需求描述
    • 使用客户端的用户经常喜欢发emoji表情,而在浏览器打开网页版的时候,emoji表情不能正常显示。在chrome下,emoji表情显示的是黑白的线框表情。
    • 所以须要经过前端来实现全部浏览器的emoji表情显示支持。
  • github上关于emoji的开源方案的尝试
twemoji

Twitter的开源项目 http://twitter.github.io/twemoji ,是目前应用最普遍的,不少其它的开源方案都是基于它来实现的。前端

项目主页  https://twemoji.maxcdn.com/react

经过script标签加一个js文件就可使用twemoji了。webpack

twemoji.parse函数既能够处理文本(将文本中的emoji的code转变为相应的img标签),git

也能够处理DOM(经过document.createDocumentFragment()将现有的DOM中的emoji code转变为img标签,再经过appenchild加载到页面上)。程序员

问题:twemoji对DOM的操做不适合React框架,并且只能在window.onload以后执行;github

         服务器是在国外,表情的图片加载的比较慢,js有放到cdn上的版本就会好一些。web

最后我选用了twemoji的处理文本的方案。以后会考虑将js作些修改,把js和表情图片放到网站服务器上提升请求速度。chrome

附加一篇简易的使用教程 https://blog.farrant.me/adding-emoji-support-to-any-website/npm

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 感受也不错

相关文章
相关标签/搜索