如何使用 TypeScript 在 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);  

            }

        };

但在 TypeScript 1.5 中，Selection 已从 Document (https://github.com/Microsoft/TypeScript/wiki/Breaking-Changes) 中删除，所以我不知道如何让它工作。我尝试使用 window.getSelection() 但没有结果

任何帮助将不胜感激:)

谢谢， 迈克尔

Answer 1

但在 TypeScript 1.5 中，选择已从文档中删除

这是特定于 Internet Explorer 的，并非对所有浏览器都通用。所以它被删除了。但是，您可以很容易地使用它不安全（将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);
    }
};

当然，这假设您知道自己在做什么，比编译器知道的要多。

更新

如何查看浏览器之间的兼容性以及可用的内容

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