Add support for emoji emoticons to your website

Source: Internet
Author: User

    • Project Framework
      • React.js + webpack + ES6 + Jquery
    • Requirements Description
      • Users who use the client often like to send emoji expressions, and when the browser opens the Web version, the emoji expression is not displayed properly. Under Chrome, the emoji expression shows a black and white wireframe expression.
      • It is therefore necessary to implement emoji emoticons support for all browsers through the front end.
    • An attempt at GitHub about emoji's open source solution
Twemoji

Twitter's open source project, Http://twitter.github.io/twemoji, is currently the most widely used, and many other open source solutions are based on it.

Project Home https://twemoji.maxcdn.com/

You can use Twemoji by adding a JS file to the script tag.

The Twemoji.parse function can handle both text (converting emoji code in text to the corresponding IMG tag),

You can also process the DOM (via Document.createdocumentfragment () to convert the emoji code in the existing DOM to an IMG tag and then load it onto the page via Appenchild).

Problem: Twemoji operation on DOM is not suitable for react framework, and can only be executed after window.onload;

The server is abroad, the image of the expression load slow, JS has put on the CDN version will be better.

In the end, I chose Twemoji's scheme of handling text. After that will consider JS to make some changes, JS and emoticons put on the site server to improve the speed of requests.

Add an easy-to-use tutorial https://blog.farrant.me/adding-emoji-support-to-any-website/

Emojify

MIT's Open Source project http://hassankhan.github.io/emojify.js/

The same is the JS module, but the expression pack uses a whole large sheet, instead of requesting a single expression separately. The whole piece is really big!

There are several different versions of emoji packs that can switch

Specific use I didn't do much to understand

React-emoji

Https://github.com/banyan/react-emoji Https://www.npmjs.com/package/react-emoji

NPM Moudle for the REACT framework

There are two versions of Emoticons pack

When I tried it, I found the following issues:

This module needs to be used with the Mixins attribute of class, and mixins is not supported in ES6 's class notation, so this scenario is discarded.

React-emojify

Https://github.com/pladaria/react-emojione https://www.npmjs.com/package/react-emojify

MIT Productions

This is a NPM that supports react ES6 moudle

Feel this is good, later can be more in-depth understanding and trial

More types of emoji open source projects

Https://github.com/showcases/emoji

There is also a programmer brother himself to apply Twemoji to the REACT scheme https://blog.datawallet.io/emojis-in-react-d733d3ae120b#.mxsnegimp

React-easy-emoji Https://github.com/appfigures/react-easy-emoji#readme Feel good too

Add support for emoji emoticons to your website

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.