Emoticons support for textarea or contenteditable div
The only way to do this in a consistently cross-browser manner is to use a WYSIWYG field that converts emoji to images.
There's a jQuery plugin jquery-emojiarea
that does what you need, so you'd just need to create a directive that wraps this plugin and you're off to the races. Since it inputs into a hidden textarea with emoji syntax :smile:
angular should have no difficulty binding.
Here's a working directive I threw together. 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; }); } };});
And usage:
<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)