Merge pull request yuku#67 from surrey/master

Adding support for contentEditable elements.
seanbollin · Apr 24, 2014 · 918e2be · 918e2be
2 parents 610c5ac + 0dcf8dc
commit 918e2be
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -176,7 +176,28 @@ <h3>Customizing header, footer</h3>
     }
 ]);
 </pre>
-
+            <h3>Apply to Contenteditables</h3>
+            <div class="textarea-wrapper">
+                <span class="label">.contenteditable1</span>
+                <div class="contenteditable1" contenteditable="true" style="display: block; width: 100%; height: 100px; border: 1px solid gray; padding-top: 20px;"><b>Look</b> at this <em>glorious</em> contenteditable.</div>
+            </div>
+<pre class="brush: js; script">
+$('.contenteditable1').textcomplete([
+    { // tech companies
+        words: ['stunning', 'amazing', 'incredible', 'fantastic', 'fantabulous'],
+        match: /\b(\w{2,})$/,
+        search: function (term, callback) {
+            callback($.map(this.words, function (word) {
+                return word.indexOf(term) === 0 ? word : null;
+            }));
+        },
+        index: 1,
+        replace: function (word) {
+            return word + '&nbsp;';
+        }
+    }
+]);
+</pre>
             <h2>License</h2>
             <p>
                 MIT

diff --git a/jquery.textcomplete.js b/jquery.textcomplete.js
@@ -257,21 +257,46 @@
       },
 
       onSelect: function (value) {
-        var pre, post, newSubStr;
+        var pre, post, newSubStr, sel, range, selection;
         pre = this.getTextFromHeadToCaret();
-        post = this.el.value.substring(this.el.selectionEnd);
+
+        if (this.el.contentEditable == 'true') {
+          sel = window.getSelection();
+          range = sel.getRangeAt(0);
+          selection = range.cloneRange();
+          selection.selectNodeContents(range.startContainer);
+          var content = selection.toString();
+          post = content.substring(range.startOffset);
+        } else {
+          post = this.el.value.substring(this.el.selectionEnd);
+        }
 
         newSubStr = this.strategy.replace(value);
+
         if ($.isArray(newSubStr)) {
           post = newSubStr[1] + post;
           newSubStr = newSubStr[0];
         }
+
         pre = pre.replace(this.strategy.match, newSubStr);
-        this.$el.val(pre + post)
-                .trigger('change')
+
+        if (this.el.contentEditable == 'true') {
+          range.selectNodeContents(range.startContainer);
+          range.deleteContents();
+          var node = document.createTextNode(pre + post);
+          range.insertNode(node);
+          range.setStart(node, pre.length);
+          range.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(range);
+        } else {
+          this.$el.val(pre + post);
+          this.el.selectionStart = this.el.selectionEnd = pre.length; 
+        }
+
+        this.$el.trigger('change')
                 .trigger('textComplete:select', value);
         this.el.focus();
-        this.el.selectionStart = this.el.selectionEnd = pre.length;
       },
 
       /**
@@ -348,19 +373,40 @@
         position.top += $span.height() - this.$el.scrollTop();
         if (dir === 'rtl') { position.left -= this.listView.$el.width(); }
         $div.remove();
+
+        if (this.el.contentEditable == 'true') {
+          var range = window.getSelection().getRangeAt(0).cloneRange();
+          var node = document.createElement('span');
+          range.insertNode(node);
+          range.selectNodeContents(node);
+          range.deleteContents();
+          position = $(node).position();
+          position.top += $(node).height() - this.$el.scrollTop();
+        }
+
         return position;
       },
 
       getTextFromHeadToCaret: function () {
         var text, selectionEnd, range;
-        selectionEnd = this.el.selectionEnd;
-        if (typeof selectionEnd === 'number') {
-          text = this.el.value.substring(0, selectionEnd);
-        } else if (document.selection) {
-          range = this.el.createTextRange();
-          range.moveStart('character', 0);
-          range.moveEnd('textedit');
-          text = range.text;
+        if (this.el.contentEditable == 'true') {
+          if (window.getSelection) {
+            // IE9+ and non-IE            
+            var range = window.getSelection().getRangeAt(0);
+            var selection = range.cloneRange();
+            selection.selectNodeContents(range.startContainer);
+            text = selection.toString().substring(0, range.startOffset);
+          }
+        } else {
+          selectionEnd = this.el.selectionEnd;
+          if (typeof selectionEnd === 'number') {
+            text = this.el.value.substring(0, selectionEnd);
+          } else if (document.selection) {
+            range = this.el.createTextRange();
+            range.moveStart('character', 0);
+            range.moveEnd('textedit');
+            text = range.text;
+          }
         }
         return text;
       },