为网站添加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 感觉也不错
时间： 2024-11-07 23:38:50

为网站添加emoji表情的支持的相关文章

Android-->轻松打造带删除按钮的输入框(EditText),附Emoji表情过滤

输入框带删除按钮, 此乃标配, 实现起来方法也很多, 网上开源也很多. 但是, 没事就喜欢瞎折腾. 上图说话. 只是在原生的基础上加了扩展. 相对来说入侵非常少, 使用方法和原生的一模一样.无任何阉割. 完整代码: public class ExEditText extends AppCompatEditText { Rect clearRect = new Rect(); public ExEditText(Context context) { super(context); } public

让MySQL支持Emoji表情 mysql 5.6

让MySQL支持Emoji表情,涉及无线相关的 MySQL 数据库建议都提前采用 utf8mb4 字符集. mysql 版本 5.6 1 解决方案:将Mysql的编码从utf8转换成utf8mb4. 需要 >= MySQL 5.5.3版本.从库也必须是5.5的了.低版本不支持这个字符集.复制报错 2 my.cnf 文件添加 [mysqld]  character-set-server = utf8mb4  collation-server = utf8mb4_unicode_ci  init_c

mysql 支持emoji表情

在mysql插入emoji表情,出现错误: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x98\x8A' for column 'content' at row 原因是当前mysql的字符集为utf-8,最多3个字节,emoji表情需要4个字节来表示.所以导致insert报错. 一般的方法是将字符集改为utf8mb4 2. utf8mb4这样的字符集需要mysql 5.5才支持,当时我的版本微5.1,所以自己去官网下了5.6的

数据库支持emoji表情

utf8 转utf8mb4就可以支持emoji表情了 [[email protected] ~]# mysql mysql: Character set 'utf8mb4' is not a compiled character set and is not specified in the '/usr/share/mysql/charsets/Index.xml' file http://blog.csdn.net/amao1/article/details/34851533

【emoji表情】阿里云数据库RDS支持emoji表情

前言 由于最近几年移动App的兴起,手机自带表情作为用户输入的方式开始流行. 但是emoji表情作为一种特殊的编码方式,之前的数据库字符编码不能正常显示. 解决 在mysql5.5之后的版本,utf8mb4的编码方式解决了emoji表情和生僻字的编码问题. 下面整理下为了兼容emoji表情,我们在数据库服务上做出的修改. 数据库字符集 也就是在创建数据库的时候选择的支持字符集,由于创建之后这项不能进行修改,所以只好重新创建了一个数据库.QAQ 参数设置 这里还需要修改RDS实例的参数设置,将ch

mysql支持emoji表情上传

背景: 由于需要实现emoji表情评论的功能,所以数据库需要支持emoji表情的存储 mysql的utf8编码的一个字符最多3个字节,但是一个emoji表情为4个字节,所以utf8不支持存储emoji表情.但是utf8的超集utf8mb4一个字符最多能有4字节,所以能支持emoji表情的存储.但是在mysql5.5之前并不支持utf8mb4编码,所以mysql一定要在5.5及以上 1.首先修改mysql配置文件 1 [mysqld] 2 character-set-client-handshak

mysql支持emoji表情存取的解决方案

让mysql支持emoji表情存取的解决方案 APP移动端无需做任何修改,服务端修改即可. 第一步:修改jdbcUrl: conn.url=jdbc:mysql://127.0.0.1:3306/eyes?zeroDateTimeBehavior=convertToNull&autoReconnect=true 第二步:mysql驱动包: mysql-connector-java-5.1.24.jar 第三步:数据库版本检查: select version() #查看mysql版本 5.6.23

mysql支持emoji表情

让MySql支持Emoji表情 解决方案:将Mysql的编码从utf8转换成utf8mb4. 需要 >= MySQL 5.5.3版本.(经检测5.5.29的也可以)低版本不支持这个字符集.复制报错 停止MySQL Server服务 修改 my.cnf或者mysql.ini [client] default-character-set = utf8mb4 [mysql] default-character-set = utf8mb4 [mysqld] character-set-client-ha

教你如何让数据库支持emoji表情符存储

From: http://www.cnblogs.com/janehoo/archive/2016/04/06/5359800.html 一.教你如何让数据库支持emoji表情符存储 解决方式:更换字符集utf8-->utf8mb4 上周有开发人员反馈一个问题:前台应用抓取微博信息,每天总有几条数据插入不成功.应用日志显示: java.sql.SQLException: Incorrect string value: '\xF0\x9F\x92\xAA",...' for column '