包简介

Add a slick emoji selector to input fields and textareas on your website.

README 文档

README

😍 😜 😂 😛 Instantly add Emoji support to input fields on your website! 💥 ✨ 👍 🤘

Demo: http://onesignal.github.io/emoji-picker/demo

Installation & Usage:

On Robustness: This library isn't super robust, so if you find any issues, please report it so it can be fixed (or feel free to fix it yourself). Code quality improvements are also welcome, always looking to make it better!

On CDN & Multiple Files: Currently, the number of JavaScript files you have to include is not ideal (6 files). The files will eventually be concatenated and minified, but it might be a bit until this happens. When that's complete, it'll be added to CDNJs as well.

In your <head> section, add the following stylesheet links. Adjust the lib/css path to match yours.

  <link href="lib/css/nanoscroller.css" rel="stylesheet">
  <link href="lib/css/emoji.css" rel="stylesheet">

Before the end of your <body> section, add the following JavaScript links. This library depends on jQuery, so jQuery must also be included, before these scripts are run. Once again, adjust the lib/css path to match yours.

  <!-- ** Don't forget to Add jQuery here ** -->
  <script src="lib/js/nanoscroller.min.js"></script>
  <script src="lib/js/tether.min.js"></script>
  <script src="lib/js/config.js"></script>
  <script src="lib/js/util.js"></script>
  <script src="lib/js/jquery.emojiarea.js"></script>
  <script src="lib/js/emoji-picker.js"></script>

On any input field, add the data attribute data-emojiable="true".
That's all you need for the default options. Play around with the demo to see what the default options give you.

Configuring Options

I want the Emoji selector to input Unicode characters instead of images

Add data-emoji-input="unicode" to your input field. Only the unicode value is checked for; entering anything else has no effect.

I want to limit my input field to a certain number of characters (maxlength)

The maxlength property is mostly supported. Character input and emoji input each count as one character, so it'll stop you from entering more than the max length. Unfortunately, you can paste more than the maxlength number of characters, so that needs to be fixed.

I want classes from my original input field to be copied over to the rich emoji input area

They are!

Trivia

You get:

Input fields converted to contenteditable rich text areas with emoji support
A happy face icon on the top right of each rich text area, which brings up the menu on click
An emoji selection menu, with recently selected emojis at the top (thanks to angular-emoji-popup's author)
Text area values can be easily converted between Unicode and HTML (Unicode+Image Tags)

What happens under the hood:

When you call new EmojiPicker().discover(), all elements with the data attribute data-emojiable="true" are found, a contenteditable div is created after each one, and the original input field is hidden.
When you type text into this contenteditable div, events are triggered upon each keypress/text change as well as each emoji selection, and the contents of this contenteditable div are copied to the original (now hidden) input field
Text entered into this contenteditable div is plain text; selected emojis are actually <img> tags
To get the value of the contenteditable div, call element.val() on the underlying hidden input field. The <img> emojis will be converted into Unicode emojis (plain text)

Credits:

This is a slightly modified version of angular-emoji-popup, which was written based on jquery-emojiarea (converts input fields to rich emoji input areas) and uses nanoScrollerJs (for the popup's custom-skinned scrollbar). This version removes AngularJS as a dependency.

Improvements from the original forks:

The top-right smiley face that allows you to bring up the emoji picker menu
The smiley face shifts left appropriately when text entered exceeds the height and causes a scrollbar to appear
The maxlength property of input fields is respected (emoji selections count as a single character)
CSS classes from the original input field are copied over to the new contenteditable div

We built this to power emoji selection for OneSignal, our multi-platform push notification service.

onesignal/emoji-picker 适用场景与选型建议

onesignal/emoji-picker 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 10.58k 次下载、GitHub Stars 达 0，最近一次更新时间为 2017 年 06 月 23 日，在 PHP 生态内属于活跃度较高的组件。

我们在过去多个企业项目中使用过 onesignal/emoji-picker 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 onesignal/emoji-picker 我们能提供哪些服务？

定制开发 / 二次开发

基于 onesignal/emoji-picker 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

onesignal/emoji-picker

包简介