fix(ie): doc.cmd 'insertText' alternative, ref #22

src/At.vue

@@ -1,8 +1,8 @@
 <script>
 import {
   closest, getOffset, getPrecedingRange,
-  getRange, applyRange, 
-  scrollIntoView, getAtAndIndex
+  getRange, applyRange,
+  scrollIntoView, getAtAndIndex, insertText
 } from './util'
 import AtTemplate from './AtTemplate.vue'
 
@@ -278,7 +278,10 @@ export default {
       // hack: 连续两次 可以确保click后 focus回来 range真正生效
       applyRange(r)
       applyRange(r)
-      document.execCommand('insertText', 0, itemName(list[cur]) + ' ')
+      const t = itemName(list[cur]) + ' '
+      // document.execCommand('insertText', 0, t)
+      insertText(t)
+      this.handleInput()
     }
   }
 }

src/AtTextarea.vue

@@ -1,7 +1,7 @@
 <script>
 import At from './At.vue'
 import getCaretCoordinates from 'textarea-caret'
-import { getAtAndIndex } from './util'
+import { insertText, getAtAndIndex } from './util'
 
 export default {
   extends: At,
@@ -87,12 +87,13 @@ export default {
     openPanel (list, chunk, offset, at) {
       const fn = () => {
         const el = this.$el.querySelector('textarea')
-        const end = offset + at.length // 从@后第一位开始
-        const rect = getCaretCoordinates(el, end)
+        const atEnd = offset + at.length // 从@后第一位开始
+        const rect = getCaretCoordinates(el, atEnd)
         this.atwho = {
           chunk,
           offset,
           list,
+          atEnd,
           x: rect.left,
           y: rect.top - 4,
           cur: 0, // todo: 尽可能记录
@@ -106,17 +107,20 @@ export default {
     },
 
     insertItem () {
-      const { chunk, offset, list, cur } = this.atwho
+      const { chunk, offset, list, cur, atEnd } = this.atwho
       const { atItems, itemName } = this
       const el = this.$el.querySelector('textarea')
-      const text = el.value.slice(0, el.selectionEnd)
+      const text = el.value.slice(0, atEnd)
       const { at, index } = getAtAndIndex(text, atItems)
       const start = index + at.length // 从@后第一位开始
       el.value = el.value.slice(0, start) + el.value.slice(start + chunk.length)
       el.selectionStart = start
       el.selectionEnd = start
       el.focus()
-      document.execCommand('insertText', 0, itemName(list[cur]) + ' ')
+      const t = itemName(list[cur]) + ' '
+      // document.execCommand('insertText', 0, t)
+      insertText(t, el)
+      this.handleInput()
     }
   }
 }

src/util.js

@@ -71,4 +71,29 @@ export function getPrecedingRange() {
     return range
   }
 }
+
+// https://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div
+// ...
+// I've updated your fiddle to move the cursor to a position immediately after the inserted text:
+// jsfiddle.net/ww3Rk/1. Seems to be fine in IE 9.
+export function insertText(text, ta) {
+  if (ta) {
+    let cut = ta.selectionStart
+    ta.value = ta.value.slice(0, cut) +
+      text + ta.value.slice(cut)
+    let end = cut + text.length
+    ta.selectionStart = end
+    ta.selectionEnd = end
+  } else {
+    var sel, range, html;
+    sel = window.getSelection();
+    range = sel.getRangeAt(0);
+    range.deleteContents();
+    var textNode = document.createTextNode(text);
+    range.insertNode(textNode);
+    range.setStartAfter(textNode);
+    sel.removeAllRanges();
+    sel.addRange(range);
+  }
+}
 /* eslint-enable */