• 项目框架

    • 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表情的支持的更多相关文章

  1. 微信公众号自定义菜单中添加emoji表情

    做微信公众号开发,可能会遇到如何加入emoji表情的问题.今天在“海南旅游小管家”公众号的菜单中加入了emoji表情,特此记录备忘. 1.登录微信公众号,在左侧找到[开发者工具]菜单,点击进入,找到[ ...

  2. 关于emoji表情,支持在app端发送web端显示,web端发送给app端显示,web与wap端互相显示。

    要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...

  3. Hexo中添加emoji表情

    国庆的三天假前,都是玩CF和LOL的无限乱斗过来的,输了怨没随机到好的英雄,赢了就高高兴兴的

  4. MySQL中支持emoji表情的存储

    由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...

  5. 数据库需要支持emoji表情

    由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...

  6. Typecho博客支持emoji表情设置

    介绍 大家在typecho博客写文章时,很多人都喜欢使用emoji表情(比如这些图标)但是typecho的数据库类型默认不支持emoji编码,因为Emoji是一种在Unicode位于u1F601-u1 ...

  7. 让mysql支持emoji表情

    一.问题及原因 APP产品想对Emoji进行支持,但发现mysql数据库无法写入表情.原因是我们的mysql数据库默认用的是utf8编码,utf8编码存储时用的是三个字节,但Emoji表情是4个字节, ...

  8. 数据库支持emoji表情

    从MySQL5.5.3开始,MySQL 支持一种utf8mb4的字符集,这个字符集能够支持4字节的UTF8编码的字符.utf8mb4字符集能够完美地兼容utf8字符串.在数据存储方面,当一个普通中文字 ...

  9. MySQL支持Emoji表情

    让MySQL支持Emoji表情,涉及无线相关的 MySQL 数据库建议都提前采用 utf8mb4 字符集. utf8mb4和utf8到底有什么区别呢?原来以往的mysql的utf8一个字符最多3字节, ...

随机推荐

  1. Maven项目中遇到的问题及其解决方案

    Maven中pom报红 1.jdk版本是否符合要求? 2.maven的本地confg中的setting.xml中是否和要求的jdk版本一致? 3.maven本地仓库路径是否正确,即为自己的确定的仓库位 ...

  2. Web页面长时间无操作后再获取焦点时转到登录界面

    今天开始讲新浪博客搬到博客园.        在工作中遇到的小问题,感觉有点意思,就记录下来吧!        该问题分为两种情况,一.Web页面长时间无操作后,在对其进行操作,比如点击“首页”.“设 ...

  3. SpringBoot +Jpa+ Hibernate+Mysql工程

    1 使用工具workspace-sts 3.9.5.RELEASE (1)新建一个SpringBoot 项目,选择加载项目需要的的组件.DevTools,JPA,Web,Mysql. Finish.  ...

  4. 请求不同域的数据方法:requests Jsonp cors

    在需要访问不同域的接口的数据的时候,一般有两种方式: 第一种: 使用requests模块,在业务逻辑中直接访问别的域的接口,获取数据,然后将返回的数据显示到前端页面上; 这个时候,数据访问的流程是: ...

  5. python 函数的名称空间及作用域

    一:名称空间 1:什么是名称空间: 名称空间即:储存名字与值的内存地址关联关系的空间 2.名称空间的分类: 内置名称空间:存储器自带的一些名称与值的对应关系,如:print,len,max等; 生命周 ...

  6. git 提交丢失Warning, you are leaving 2 commits behind,

    早上在自己的一个版本代码上编辑,提交commint,但是checkout到其他分支再checkout回来发现该的东西不见了, 幸好terminal还没有关掉,回看日志: Warning: you ar ...

  7. shell一出手

    1.查看有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数: grep "/index.php" ...

  8. 516. Longest Palindromic Subsequence最长的不连续回文串的长度

    [抄题]: Given a string s, find the longest palindromic subsequence's length in s. You may assume that ...

  9. time模块的使用

    https://www.cnblogs.com/jimmy-share/p/10605575.html import time 一.方法汇总: time.sleep():定时函数 time.time( ...

  10. git创建新的分支

    1.本地创建一个新的分支 git branch develop 2.切换到新创建的分支 git checkout develop 3.将新的分支发布到gitlab上 git push origin d ...