angularjs – 表情符号支持textarea或contenteditable div

有一个jQuery插件jquery-emojiarea可以做你所需要的,所以你只需要创建一个包装这个插件的指令,你就可以参加比赛了.因为它用emoji语法输入隐藏的textarea：smile：angular应该没有困难绑定.

这是我一起投掷的一个工作指令. http://jsfiddle.net/dboskovic/g8x8xs2t/

var app = angular.module('app',[]);
app.controller('BaseController',function ($scope) {
    $scope.text = 'This is pretty awesome. :smile: :laughing:';
});
app.directive('emojiInput',function ($timeout) {
    return {
        restrict: 'A',require: 'ngModel',link: function ($scope,$el,$attr,ngModel) {
            $.emojiarea.path = 'https://s3-us-west-1.amazonaws.com/dboskovic/jquery-emojiarea-master/packs/basic';
            $.emojiarea.icons = {
                ':smile:': 'smile.png',':angry:': 'angry.png',':flushed:': 'flushed.png',':neckbeard:': 'neckbeard.png',':laughing:': 'laughing.png'
            };
            var options = $scope.$eval($attr.emojiInput);
            var $wysiwyg = $($el[0]).emojiarea(options);
            $wysiwyg.on('change',function () {
                ngModel.$setViewValue($wysiwyg.val());
                $scope.$apply();
            });
            ngModel.$formatters.push(function (data) {
                // emojiarea doesn't have a proper destroy :( so we have to remove and rebuild
                $wysiwyg.siblings('.emoji-wysiwyg-editor,.emoji-button').remove();
                $timeout(function () {
                    $wysiwyg.emojiarea(options);
                },0);
                return data;
            });
        }
    };
});

使用方法：

<textarea ng-model="text" emoji-input="{buttonLabel:'Insert Emoji',wysiwyg:true}"></textarea>

If you want the editable field to convert text like :( as you type you’ll need to fork that jquery plugin and modify it slightly to parse input text on change as well as on init. (like,a couple lines of code)