emojiarea.js 快速易用的 jQuery 表情符号插件

简介

emojiarea.js一个快速易用的jQuery表情符号选取器，允许用户将表情快速插入输入字段和文本区域，为他们的消息添加额外的表情和情感层。

（下载的附件中附有DEMO）

💡 说明：本文主要针对2.0版本，该插件现在已经升级3.0版本，👉 [ 详情 ]

使用

1. 引入

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

<script src="./lib/js/config.min.js"></script>
<script src="./lib/js/util.min.js"></script>
<script src="./lib/js/emoji-picker.min.js"></script>
<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.emojiarea.min.js"></script>

2. HTML

将您的文本字段添加到 emoji-picker-container 。

<p class="emoji-picker-container">
  <input data-emojiable="true" maxlength="10" />
</p>
<p class="lead emoji-picker-container">
  <textarea data-emojiable="true"></textarea>
</p>

3. 调用

$(function() {
  // Initializes and creates emoji set from sprite sheet
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath: './lib/img/',
    ButtonClasses: 'fa fa-smile-o', // font awesome icon
  });
  // Finds all elements with `emojiable_selector` and converts them to rich emoji input fields
  // You may want to delay this step if you have dynamically created input fields that appear later in the loading process
  // It can be called as many times as necessary; previously converted input fields will not be converted again
  window.emojiPicker.discover();
});

插入unicode表情符号而不是图像。

<p class="emoji-picker-container">
  <input data-emojiable="true" data-emoji-input="unicode" maxlength="10" />
</p>
<p class="lead emoji-picker-container">
  <textarea data-emojiable="true" data-emoji-input="unicode"></textarea>
</p>

相关链接

GitHub 地址（3.0版本）：  https://github.com/mervick/emojionearea

易助科技网效果演示地址： http://demo.easyzone.net.cn/plugin/emoji/demo/index.html