如何在你的项目中引入emoji😀

最近在做我们学校的表白墙网站,在做到评论功能的时候自然而然就想到了emoji-😏。 于是就去搜了一些这方面的资料,发现了比较好的三个emoji库:

  • emojione(第一个开源且完整的emoji网站,编码方面100%免费,且与项目有非常好的整合性)
  • Twemoji (完全免费,简单小巧,API相比emojione较少。)
  • Twemoji Awesome (Twemoji社区的项目,纯css显示emoji)

综合考虑最后选择了emojione来实现,因为API比较多而且文档十分友好。

引入emojione

  • 通过外链
<script src="https://cdn.jsdelivr.net/npm/emojione@3.1.2/lib/js/emojione.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/emojione@3.1.2/extras/css/emojione.min.css"/>
  • NPM
> npm install emojione

生成emoji选择界面

首先我们需要这些emoji的图片,随即我就去emojione官网下载了32×32px的PNG图片,可是之后我发现图片太多不可能让我一个一个引入吧!

转变思路,去看emojione的文档,发现了一个提供API演示功能的[emojione实验室](https://demos.emojione.com/latest/index.html## extras)。

实验室中有一个API可以把HTML中的unicode 转换为图片:.unicodeToImage(str)

于是我用JS Bin 做了一个小demo测试了一下,发现没有什么问题。

OK,那么我们就可以通过这个API批量生成emoji的图片了,可是emoji的Unicode码去哪找呢? 官方提供了一个Unicode复制粘贴的网站:emojiCOPY

选中想要的emoji,之后点击COPY就可以复制下来,然后再粘贴到刚才的JS Bin之中就可以批量生成图片了:

之后把这些图片的HTML直接复制到我们的项目之中:

让人惊喜的是这些生成的img的alt是Unicode,这让input显示和用户点击同步也变得简单了。

接下来只需要写很简单的JS就可以实现了:

$('.emoji').children().click((emoji)=> {
    comment = comment + ' ' + emoji.target.alt + ' '
})