テキストエイリアンまたはcontenteditable divの絵文字のサポート

Question

textareaコンポーネントを実装すると、絵文字がサポートされます書く。

Iは、元のテキスト濾過/生成されたHTML結果を提示しながら（アスキー文字のみ）（角度絵文字とをフィルタリング）divにバックアップできるようにします。

私の最初の溶液は

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

にあるが、私は隠されたテキストエリアを使用しての一部になってトラブルを抱えています。また、これで私はテキストをマウスで選択したり、削除したり、安全にコピー/ペーストすることはできません。

<div contenteditable="true">でも考えていますが、ng-focusとng-changeは処理されません。

これを継続する方法について誰かが渋滞していませんか？

編集1：ここでは私がやっていることを試して、jsfiddleです。これまでは、最初のオカレンスを置き換えることができましたが、それ以来、動作は不安定なままです。私は、双方向データバインディングと顔文字パターンをフィルタリングするためにcontenteditable指示を使用しています。

編集2：ng-focusとng-changeが処理できないだろうと言って、私の声明については、それは真実ではない - <div contenteditable="true">上でネイティブに動作し、ng-changeは限りディレクティブはngModelを使用して設定すると宣言されたように動作しますng-focus適切な$modelValueおよび$viewValue（例は、の編集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時に入力テキストを解析します。