wedgies · a-sane · Jun 9, 2015 · Jun 21, 2015 · Jun 21, 2015
diff --git a/README.md b/README.md
@@ -1,5 +1,25 @@
 # jQuery Emoji Picker #
 
+## Note ##
+This is fork of wedgies/jquery-emoji-picker with support of content-editable.
+
+Use:
+
+ ```javascript
+ $('.question').emojiPicker({
+   height: '300px',
+   width: '450px',
+   contenteditable: true
+ });
+ ```
+
+Also you always can get pure text with unicode emoji and save it to your DB for example:
+  ```javascript
+  alert($('.question').data(text));
+  ```
+
+When content-editable is enabled, all unicode emoji in editor wil be automaticaly changed to images on plugin init
+
 ## Description ##
 
 The top 3 things your users love:
@@ -31,7 +51,6 @@ Add the following to your `<head></head>` tag:
 ```html
 <link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.css">
 <script type="text/javascript" src="js/jquery.emojipicker.js"></script>
-
 <!-- Emoji Data -->
 <link rel="stylesheet" type="text/css" href="css/jquery.emojipicker.a.css">
 <script type="text/javascript" src="js/jquery.emojipicker.a.js"></script>

diff --git a/css/jquery.emojipicker.css b/css/jquery.emojipicker.css
diff --git a/js/jquery.emojipicker.js b/js/jquery.emojipicker.js
@@ -9,7 +9,8 @@
         iconColor: 'black',
         iconBackgroundColor: '#eee',
         container: 'body',
-        button: true
+        button: true,
+        contenteditable: false
       };
 
   var MIN_WIDTH = 200,
@@ -30,6 +31,7 @@
     // (type) Safety first
     this.settings.width = parseInt(this.settings.width);
     this.settings.height = parseInt(this.settings.height);
+    this.settings.contenteditable = this.settings.contenteditable.constructor === Boolean ? this.settings.contenteditable : false;
 
     // Check for valid width/height
     if(this.settings.width >= MAX_WIDTH) {
@@ -65,6 +67,49 @@
       this.addPickerIcon();
       this.createPicker();
       this.listen();
+      this.ce();
+    },
+
+    ce: function () {
+      if (this.settings.contenteditable) {
+        var editor = this.$el;
+        var that = this;
+        var t = editor.text();
+        if(t.length > 0){
+          for (var i = 0; i < $.fn.emojiPicker.emojis.length; ++i) {
+            var emojiHtml = "<img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAQAIBRAA7' class='emojiCe emoji-" + $.fn.emojiPicker.emojis[i].shortcode + "' data-unicode='" + toUnicode($.fn.emojiPicker.emojis[i].unicode) + "'/>";
+            t = t.replace(new RegExp(toUnicode($.fn.emojiPicker.emojis[i].unicode), 'g'), emojiHtml);
+          }
+        }
+        editor.html(t);
+        editor.on('input click', function (e) {
+          var element = this;
+          var doc = element.ownerDocument || element.document;
+          var win = doc.defaultView || doc.parentWindow;
+          var sel;
+          sel = win.getSelection();
+          if (sel.rangeCount > 0) {
+            var range = sel.getRangeAt(0);
+            sel.removeAllRanges();
+            sel.addRange(range);
+            that.editorRange = range;
+          }
+          that.getCeText();
+        });
+        editor.on('paste', function (e) {
+          e.preventDefault();
+          var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste something..');
+          window.document.execCommand('insertText', false, text);
+        });
+      }
+    },
+
+    getCeText: function() {
+      var editor = this.$el.clone();
+      $('img', editor).each(function(){
+        $(this).replaceWith($(this).data('unicode'));
+      });
+      this.$el.data('text', editor.text());
     },
 
     addPickerIcon: function() {
@@ -206,7 +251,18 @@
       var emojiShortcode = $(e.target).attr('class').split('emoji-')[1];
       var emojiUnicode = toUnicode(findEmoji(emojiShortcode).unicode);
 
-      insertAtCaret(this.element, emojiUnicode);
+      if (this.settings.contenteditable) {
+        if(typeof this.editorRange === 'undefined'){
+            this.$el.focus();
+            this.$el.trigger('input');
+        }
+        var emojiHtml = "<img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAQAIBRAA7' class='emojiCe " + $(e.target).attr('class') + "' data-unicode='" + emojiUnicode + "'/>";
+        this.editorRange = insertAtCeCaret(emojiHtml, this.editorRange);
+        this.getCeText();
+      }
+      else {
+        insertAtCaret(this.element, emojiUnicode);
+      }
     },
 
     emojiCategoryClicked: function(e) {
@@ -349,6 +405,21 @@
     }
   }
 
+  function insertAtCeCaret(myValue, range) {
+    var el = document.createElement("div");
+    el.innerHTML = myValue;
+    var frag = document.createDocumentFragment(), node, lastNode;
+    while ((node = el.firstChild)) {
+      lastNode = frag.appendChild(node);
+    }
+    range.insertNode(frag);
+    if (lastNode) {
+      range.setStartAfter(lastNode);
+      range.collapse(false);
+    }
+    return range;
+  }
+
   function toUnicode(code) {
     var codes = code.split('-').map(function(value, index) {
       return parseInt(value, 16);