关闭

Emoji开源库推荐_支持emoji表情的js的开源项目总汇

时间: 2018-02-06阅读: 6831标签: 开源

Emoji(表情符号)的使用到处都有,想通过js为自己的网页添加Emoji吗?今天就为大家整理在Github上最受欢迎的Emoji开源库,让自己的页面显示Emoji。


twemoji 

通过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/

github地址:http://twitter.github.io/twemoji,是目前应用最广泛的,很多其它的开源方案都是基于它来实现的。

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


emojify 

同样是js模块,但是表情包使用的是一整张大的sheet,而不是分别请求单个表情。一整张真的很大啊!有多个不同版本表情包可以切换

github地址: http://hassankhan.github.io/emojify.js/


Emoji Cheat Sheet 

Emoji Cheat Sheet 是绘文字短代码小抄列表。Github上支持Emoji表情符号,短码,而不是特殊字符。使用方法为前后冒号包围表情代号的句法。 

:blush:

github地址:https://github.com/twitter/twemoji


react-emoji  

用于React框架npm moudle,有两个版本的表情包。我在尝试使用的时候发现了以下问题:需要通过Class的mixins属性来使用这个模块,而在ES6的class写法中是不支持mixins。

github地址:https://github.com/banyan/react-emoji


react-emojify 

MIT出品。这是一个支持React ES6的npm moudle。感觉这个还不错,以后可以更深入的了解和试用一下

github地址:https://github.com/pladaria/react-emojione 



站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/422

关闭

Github上开源的10大Javascript模板引擎

目前前端主流的开发框架有Vue、React以及Angular等,但是依然有一部分开发人员并不会去使用这些框架,特别是一些偏向后端的开发者,可能依然在使用类似于jquery+Bootstrap的方式在开发一些项目

我是如何创造“开源”这个词的

开源软件open source software创立 20 周年的纪念日。由于开源软件渐受欢迎,并且为这个时代强有力的重要变革提供了动力,我们仔细反思了它的初生到崛起。

微软WPF开源了

在去年的 Microsoft Connect(); 开发者大会上,微软宣布开源三种主要的 Windows UX 技术,其中就包括了 Windows Presentation Foundation (WPF),除此之外还有 Windows Forms 和 Windows UI XAML 库 (WinUI)

谷歌开源内部代码评审规范

代码评审的主要目的是确保 Google 代码库的整体代码运行状况随着时间的推移而不断改善。代码评审的所有工具和过程都是为此设计的。为了实现这一点,必须做出一系列的权衡。

谷歌Go魅力的10个开源项目

谷歌的Go编程语言问世已有10年,无疑已扬名立万。由于丰富的库和抽象机制简化了开发并发分布式(即云)应用程序的工作,轻巧且易于编译的Go备受关注。但是真正衡量任何一种编程语言成功的标准是开发人员用它创建的项目

盘点那些走向世界的中国项目

“开源(Open Source)”,这个在程序员界耳熟能详的词,几乎充斥着我们的整个职业生涯。相信没有一个程序员不知道啥是“开源”,相信没有一个程序员从来没用过“开源”产品

任正非:鸿蒙开源是对全世界小公司创新的支持

鸿蒙系统成为万众瞩目的焦点。华为消费者业务 CEO 余承东曾表示,华为不是要做另一个安卓,鸿蒙要做下一代操作系统,也就是 5G 条件下万物互联的新场景。那么,在复杂环境的影响下

Vue友最爱的10个开箱即用的开源项目(建议收藏)

截至目前Vue在GitHub上的Star数已经高达152601,还有绝大数像笔者一样不经常star别人的Vue友们(可恨可气)。Vue因其友好程度让更多前端爱好者加入到其中,开源项目对程序员来说是很有用的

成功运作一个开源项目的 15 个要点

运作开源项目很容易。所有你需要做的就是让你的源代码可用和开源,对吧?嗯,也许。其实,开源项目是否成功取决于你对项目成功的定义。且不论你是怎么定义的,创建开源项目需要大量的工作。如果你已经有了目标

选择开源项目什么很重要?

开发人员在决定是否使用某个开源项目时考虑到的比较重要的事项是什么?代码质量?安全性?好的文档?上述因素都很重要,但根据 Tidelift 和 The New Stack 的联合调查

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!