README

😍 😜 😂 😛 立即为您的网站输入字段添加Emoji支持！ 💥 ✨ 👍 🤘

演示： http://onesignal.github.io/emoji-picker/demo

安装 & 使用

关于鲁棒性：此库不是非常健壮，因此如果您发现任何问题，请报告以便修复（或者您可以自行修复）。代码质量改进也欢迎，我们一直在努力使其更好！

关于CDN和多文件：目前，您需要包含的JavaScript文件数量并不理想（6个文件）。文件最终将被合并和压缩，但可能需要一段时间。完成后，它也将添加到CDNJs中。

在您的 <head> 部分，添加以下 stylesheet 链接。调整 lib/css 路径以匹配您的路径。

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

在您的 <body> 部分的末尾，添加以下 JavaScript 链接。此库依赖于jQuery，因此jQuery必须在运行这些脚本之前包含。再次调整 lib/css 路径以匹配您的路径。

  <!-- ** 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>

在任何输入字段上，添加数据属性 data-emojiable="true"。
这就是默认选项所需的所有内容。在演示中试一试，看看默认选项能给您带来什么。

配置选项

我希望emoji选择器输入Unicode字符而不是图片

将 data-emoji-input="unicode" 添加到您的输入字段。仅检查 unicode 值；输入其他内容没有任何效果。

我希望限制我的输入字段以特定的字符数（maxlength）

maxlength 属性基本支持。字符输入和emoji输入各计为一个字符，因此它将阻止您输入超过最大长度。不幸的是，您可以粘贴超过maxlength数量的字符，因此需要修复。

我希望将原始输入字段的类复制到丰富的emoji输入区域

是的！

趣事

您将获得

将输入字段转换为带有emoji支持的可编辑内容区域
每个丰富文本区域的右上角有一个笑脸图标，点击时会弹出菜单
一个emoji选择菜单，其中顶部显示最近选择的emoji（感谢angular-emoji-popup的作者）
文本区域值可以轻松地在Unicode和HTML（Unicode+Image Tags）之间转换

内部机制

当您调用 new EmojiPicker().discover() 时，所有具有数据属性 data-emojiable="true" 的元素都会被找到，每个元素之后都会创建一个可编辑的div，原始输入字段将被隐藏。
当您在这个可编辑div中输入文本时，每次按键/文本变化以及每次表情符号选择都会触发事件，并且这个可编辑div的内容会复制到原始（现在隐藏的）输入字段。
输入到这个可编辑div中的文本是纯文本；所选表情符号实际上是 <img> 标签。
要获取可编辑div的值，请在底层隐藏的输入字段上调用 element.val()。<img> 表情符号将被转换为Unicode表情符号（纯文本）。

鸣谢

这是对angular-emoji-popup的略微修改版本，该版本是基于jquery-emojiarea（将输入字段转换为丰富的表情符号输入区域）和nanoScrollerJs（用于弹出窗口的自定义皮肤滚动条）编写的。这个版本去掉了AngularJS作为依赖。

对原始分支的改进

右上角的笑脸图标，允许您打开表情符号选择菜单。
当输入的文本超过高度并导致出现滚动条时，笑脸图标会相应地向左移动。
输入字段的 maxlength 属性得到尊重（表情符号选择算作一个字符）。
从原始输入字段复制CSS类到新的可编辑div。

我们构建了这个功能，为我们的多平台推送通知服务OneSignal提供表情符号选择。

onesignal / emoji-picker

维护者

详细信息