为网站添加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表情的支持的更多相关文章
- 微信公众号自定义菜单中添加emoji表情
做微信公众号开发,可能会遇到如何加入emoji表情的问题.今天在“海南旅游小管家”公众号的菜单中加入了emoji表情,特此记录备忘. 1.登录微信公众号,在左侧找到[开发者工具]菜单,点击进入,找到[ ...
- 关于emoji表情,支持在app端发送web端显示,web端发送给app端显示,web与wap端互相显示。
要用到emoji.js和emoji.jquery.js两个插件配合实现三端互通. 1.app端发送的emoji表情----到服务器---服务器存储的是‘问号’,无法显示如图所示: 后台的同学也试验了网 ...
- Hexo中添加emoji表情
国庆的三天假前,都是玩CF和LOL的无限乱斗过来的,输了怨没随机到好的英雄,赢了就高高兴兴的
- MySQL中支持emoji表情的存储
由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...
- 数据库需要支持emoji表情
由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储,根据查询的资料最终实现了该功能,现将实现的过程以及过程遇到的一些问题记录下来,供大家参考和交流. mysql的utf8编码 ...
- Typecho博客支持emoji表情设置
介绍 大家在typecho博客写文章时,很多人都喜欢使用emoji表情(比如这些图标)但是typecho的数据库类型默认不支持emoji编码,因为Emoji是一种在Unicode位于u1F601-u1 ...
- 让mysql支持emoji表情
一.问题及原因 APP产品想对Emoji进行支持,但发现mysql数据库无法写入表情.原因是我们的mysql数据库默认用的是utf8编码,utf8编码存储时用的是三个字节,但Emoji表情是4个字节, ...
- 数据库支持emoji表情
从MySQL5.5.3开始,MySQL 支持一种utf8mb4的字符集,这个字符集能够支持4字节的UTF8编码的字符.utf8mb4字符集能够完美地兼容utf8字符串.在数据存储方面,当一个普通中文字 ...
- MySQL支持Emoji表情
让MySQL支持Emoji表情,涉及无线相关的 MySQL 数据库建议都提前采用 utf8mb4 字符集. utf8mb4和utf8到底有什么区别呢?原来以往的mysql的utf8一个字符最多3字节, ...
随机推荐
- 安装好ubuntu双系统启动时卡死解决办法
问题描述:在安装完ubuntu双系统后,第一次启动ubuntu系统时,卡死在启动界面(或者黑屏),这大概都是由于显卡驱动的原因,具体不在这里阐述,通过以下方法能成功解决,据我个人经验,这可能是诸多方法 ...
- python中使用Opencv进行车牌号检测——2018.10.24
初学Python.Opencv,想用它做个实例解决车牌号检测. 车牌号检测需要分为四个部分:1.车辆图像获取.2.车牌定位.3.车牌字符分割和4.车牌字符识别 在百度查到了车牌识别部分车牌定位和车牌字 ...
- 正确理解c和c ++的复杂类型声明
本文作者girlrong是网易广州社区的C语言版版主,这篇文章被选在精华区.很是不错,不敢独享!据说她乐于助人,虚心诚恳,颇受网友欢迎.只可惜现在已退隐江湖了.在最近学习C语言过程中,了解些前辈大牛的 ...
- document.getElementById(“id”)与$("#id")的区别
document.getElementById("id")可以直接获取当前对象, jQuery利用$("#id")获取的是一个[object Object],需 ...
- oracle数据库分页总结
/* BEGIN CREATE TABLE APPUSER(IDS NUMBER(8), USERNAME VARCHAR2(20), PASSWORD VARCHAR2(20), CTIME DAT ...
- Python基础-python数据类型(四)
python数据类型 在python中,变量就是变量,它没有类型,我们所说的类型是变量所指的内存中对象的类型. python中的数据类型: 1.数字 python中没有专门定义常量的方式,通常使用大写 ...
- [leetcode]152. Maximum Product Subarray最大乘积子数组
Given an integer array nums, find the contiguous subarray within an array (containing at least one n ...
- canvas(三) star- demo
/** * Created by xianrongbin on 2017/3/8. * 本例子使用渐变画出 璀璨星空 */ var dom = document.getElementById('clo ...
- Linux下Mysql安装(RPM安装)
1. 首先检查机器里是否已经存在MySQL $ rpm -qa | grep mysql 2. 去官网下载相应的rpm包:https://dev.mysql.com/downloads/mysql/ ...
- VS2015 提示 无法启动 IIS Express Web 服务器
好久没有写东西了,不是没的写,是没时间了,今天快下班了,正好遇到这个一个问题,我就记录下来,以防忘记. 我定义了一个项目,Demo代码也写好了,然后,我们就把写好的项目代码加入到了源代码管理工具里.然 ...