diff --git a/README.md b/README.md
index c9ee9fa..e8eaf37 100644
--- 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 `` tag:
```html
-
diff --git a/css/jquery.emojipicker.css b/css/jquery.emojipicker.css
index 0eb74f7..f87c8e6 100644
--- a/css/jquery.emojipicker.css
+++ b/css/jquery.emojipicker.css
@@ -18,3 +18,13 @@
.emojiPicker section {overflow:scroll; position:relative; z-index:10; background:#fff;}
.emojiPicker section div {width:40px; float:left; margin:3%;}
.emojiPicker section div:hover {cursor:pointer;}
+
+.emojiCe {
+ display: inline-block;
+ vertical-align: middle;
+ width: 22px;
+ height: 22px;
+ margin: 0 5px;
+ border: 0;
+ outline: 0;
+}
diff --git a/js/jquery.emojipicker.js b/js/jquery.emojipicker.js
index 17a1b44..97fca14 100644
--- 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 = "
";
+ 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 = "";
+ 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);