Путаться о window.getSelection() api

Question

Я использую атрибут div с атрибутом html5 contenteditable = "true", чтобы использовать его в качестве редактора. Я вставляю слова в позицию каретки, используя window.getSelection() api.

Но его поведение по-разному в IE11.

Когда я набираю window.getSelection() в консоли хром после загрузки страницы, он возвращает элемент body.

То же самое в IE-11 консоли возвращения текстового узла, благодаря которому вставки текста в позиции курсора не работает должным образом.

Вот код pasteTextAtCaret функция()

var ele = $(".editor"); 
function pasteHtmlAtCaret(html) { 
        if(!ele.is(':focus')) {ele.focus();} 
        var sel, range; 
        if (window.getSelection) { 
         // IE9 and non-IE 
         sel = window.getSelection(); 
         if (sel.getRangeAt && sel.rangeCount) { 
          range = sel.getRangeAt(0); 
          range.deleteContents(); 

          // Range.createContextualFragment() would be useful here but is 
          // non-standard and not supported in all browsers (IE9, for one) 
          var el = document.createElement("div"); 
          el.innerHTML = html; 
          var frag = document.createDocumentFragment(), node, lastNode; 
          while ((node = el.firstChild)) { 
           lastNode = frag.appendChild(node); 
          } 
          range.insertNode(frag); 

          // Preserve the selection 
          if (lastNode) { 
           range = range.cloneRange(); 
           range.setStartAfter(lastNode); 
           range.collapse(true); 
           sel.removeAllRanges(); 
           sel.addRange(range); 
          } 
         } 
        } else if (document.selection && document.selection.type !== "Control") { 
         // IE < 9 
         document.selection.createRange().pasteHTML(html); 
        } 
       } 

Я пропускаю что-нибудь?

Answer 1

Наконец-то я понял, что в моем css я использовал следующее свойство для редактора, который вызывает проблему.

-ms-user-select: none