关闭

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

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

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

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

20个值得关注的 Vue开源项目

Vue 相对不于 React 的一个优点是它易于理解和学习,且在国内占大多数。咱们可以在 Vue 的帮助下创建任何 Web 应用程序。 因此,时时了解一些新出现又好用的Vue 开源项目也是挺重要,一方面可以帮助咱们更加高效的开发

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

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

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

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

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

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

为什么开源可以提高程序员的编程技能?

我已经写了很多年的软件。最近我意识到,我越涉及(致力于,结合于等)开源技术,我写出来的代码就更好。这不由地让我疑惑起来:难道里面有什么相关性或因果关系吗?

微软WPF开源了

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

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

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

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

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

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

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

适用于数据项目的7种强大的开源工具

功能强大的数据项目开源工具将使企业的业务更加无缝和功能化。无论是数据科学专业人士还是想要帮助企业成功地完成数据科学项目的IT部门,需要使用一些必不可少的数据科学工具。

点击更多...

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