Question

我得到了这个表情符号：

https://github.com/one-signal/emoji-picker

我正在考虑制定一个指令，这是使用表情符号选择器的功能：

$(function() {
  // Initializes and creates emoji set from sprite sheet
  window.emojiPicker = new EmojiPicker({
    emojiable_selector: '[data-emojiable=true]',
    assetsPath: 'lib/img/',
    popupButtonClasses: 'fa fa-smile-o'
  });
  // 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();
});

这是表情符号的htlm用法：

  <p class="lead emoji-picker-container">
    <textarea class="form-control textarea-control" rows="3" placeholder="Textarea with emoji Unicode input" data-emojiable="true" data-emoji-input="unicode"></textarea>
  </p>

我怎么能为我的角项目做这个？谢谢你的帮助！

Answer 1

ng-emoji-picker是https://github.com/OneSignal/emoji-picker

的角度指示

它删除了Original Emoji Picker使用的wysiwyg编辑器，它将您的输入/文本区域转换为div，而只是在当前文本框或输入上添加表情符号选择器图标并使用unicode添加表情符号

Answer 2

如果有人在为Angular 2寻找表情符号选择器，我会在搜索两天后发现这个非常有用的jQuery插件： EmojiOne Area

如果要调用是在组件中声明一个全局变量（您要在其中使用它），请declare const jQuery: any，然后确保在ngAfterViewInit()中使用它。 ngAfterViewInit()将确保您的DOM已准备就绪，否则您将收到错误消息，指出emojioneArea不是函数。

通过按ID或类选择输入元素来使用它：
jQuery(".your-input-selector").emojioneArea();

Answer 3

您也可以将其用于带有角度的EmojiOne Area

// Document ready
angular.element(document).ready(function () {
}

我唯一的问题是，在<md-input-container>内的textarea中使用它时，它会使行为混乱，并且与我的模型接缝的连接将断开。选择器也会显示在其他元素下。我还没有尝试过ng-emoji-picker。

Answer 4

表情符号选择器与角形效果很好易于使用。

使用webpack导入库

import 'angular-emoji-picker-extended/dist/js/emoji-picker';

在视图中

<span container-id="txtPostMessage"  emoji-picker="post.message" output-format="unicode" placement="right-relative" title="Emoji"></span>

确保在控制器中初始化模型，瞧！

如何在angularjs中使用emoji picker lib with directive？

4 个答案: