表情符号支持textarea或contenteditable div

Question

尝试在编写时实现textarea具有表情符号支持的组件.

我希望能够备份原始文本(仅限ascii chars),同时在a上显示过滤/生成的html结果(带有角度表情符号过滤器)div.

我最初的解决方案是

<textarea ng-model="text" ng-change="..." ng-focus="..."></textarea>
<div ng-bind-html="text | myEmoticonsFilter"></div>

但是我无法使用隐藏的textarea.此外,有了这个,我将无法鼠标选择文本并删除或复制/粘贴安全.

我也想过用的<div contenteditable="true">,但ng-focus并ng-change不会被处理.

有没有人对如何继续这个有任何兴趣？

编辑1:这是一个jsfiddle尝试我正在做的事情.到目前为止,能够替换第一次出现,但行为仍然不稳定.我正在使用contenteditable指令进行双向数据绑定并过滤表情符号模式.

编辑2:关于我的声明称,ng-focus与ng-change不进行处理,这是不正确- ng-focus原生支持上<div contenteditable="true">,并ng-change只要一个指令通过声明将工作ngModel和制定适当的$modelValue和$viewValue(一个例子是在所提供的jsfiddle在编辑1).

Answer 1

以一致的跨浏览器方式执行此操作的唯一方法是使用将表情符号转换为图像的WYSIWYG字段.

有一个jQuery插件可以满足jquery-emojiarea你的需要,所以你只需要创建一个包装这个插件的指令就可以了.由于它输入带有表情符号语法的隐藏文本区域,因此:smile:角度应该没有任何困难.

这是我一起工作的指令.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>

如果您希望可编辑字段像:( 键入时一样转换文本,则需要对该jquery插件进行分叉并稍微修改它以在变更和init上解析输入文本.(比如,几行代码)