Как вставить в положении каретки contenteditable с помощью машинопись

Question

Я использовал, чтобы иметь такой код:

this.insertNodeAtCaret = function(node) { 

      var sel, range, html; 

      function containerIsEditable(selection) { 
       return $(selection.anchorNode).parent().hasClass("editable"); 
      } 

      if (window.getSelection) { 
       sel = window.getSelection(); 
       // only if it is a caret otherwise it inserts 
       // anywhere! 
       if (containerIsEditable(sel) && sel.getRangeAt 
         && sel.rangeCount) { 
        var previousPosition = sel.getRangeAt(0).startOffset; 
        sel.getRangeAt(0).insertNode(node); 
       } 
      } 
      else if (document.selection 
        && document.selection.createRange) { 
       range = document.selection.createRange(); 
       html = (node.nodeType == 3) ? node.data 
         : node.outerHTML; 
       range.pasteHTML(html); 

      } 

     }; 

но в 1.5 Выбор машинопись был удален из документа (https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes), так что я не знаю, как получить это работает .. Я попытался с window.getSelection(), но без результатов

Любая помощь будет оценена :)

Спасибо, Майкл

Answer 1

but in TypeScript 1.5 Selection was removed from Document

Это специфичные для исследователя интернета и не доступны в общем для всех браузеров. Поэтому он был удален. Однако вы можете использовать его unsafely (путем обработки document как any) довольно легко. Вот ваш пример кода переработан для компиляции без ошибок:

const insertNodeAtCaret = function (node) { 
    const doc = document as any; 

    var sel, range, html; 

    function containerIsEditable(selection) { 
     return $(selection.anchorNode).parent().hasClass("editable"); 
    } 

    if (window.getSelection) { 
     sel = window.getSelection(); 
     // only if it is a caret otherwise it inserts 
     // anywhere! 
     if (containerIsEditable(sel) && sel.getRangeAt 
      && sel.rangeCount) { 
      var previousPosition = sel.getRangeAt(0).startOffset; 
      sel.getRangeAt(0).insertNode(node); 
     } 
    } 
    else if (doc.selection 
     && doc.selection.createRange) { 
     range = doc.selection.createRange(); 
     html = (node.nodeType == 3) ? node.data 
      : node.outerHTML; 
     range.pasteHTML(html); 
    } 
}; 

Конечно, это предполагает, что вы знаете, что вы делаете больше, чем компилятор знает.

Update

how can I see the compatibility of those among browsers and what is available

Вы можете увидеть СОВМЕСТИМОСТЬ диаграмму window.getSelection здесь: https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection

document.selection был IE только/специфичны и были удалены: https://msdn.microsoft.com/en-us/library/ms535869(v=vs.85).aspx