insertText 的 document.execCommand 在 IE 中不起作用

Question

我正在努力从上周开始挖掘解决我的问题的方法。 document.execCommand('insertText', false, emo)此代码行适用于除 IE (Internet Explorer 11) 之外的所有浏览器。 对于 IE，我编写了insertTextAtCursor方法，它总是首先插入可编辑的内容。

我的问题是，如何将文本插入到 IE 光标点的 contentEditable 中？ 提前致谢。

var insertTextAtCursor = function (html) {
    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.innerText = 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(false);
          sel.removeAllRanges();
          sel.addRange(range);
        }
      }
    } else if (document.selection && document.selection.type != "Control") {
      // IE < 9
      document.selection.createRange().pasteHTML(html);
    }
  };

Answer 1

document.execCommand('insertText', false, emo)

没有从insertTextAtCursor函数中找到上面的代码，你在何时何地使用insertTextAtCursor函数和execCommand方法？ 从这篇文章来看，execCommand 方法似乎支持 IE 浏览器。 而且，我已经使用您的代码创建了一个示例，似乎一切正常，请检查：

<div id="thing" contenteditable="true" style="width:200px; border :1px solid black; cursor:pointer">
    this is a some random foo bar jumps over a stick test
</div>

<input type="button" value="Add" onclick="insertTextAtCursor('aaaa');" />
<script>
    var insertTextAtCursor = function (html) {
        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.innerText = 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(false);
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
            }
        } else if (document.selection && document.selection.type != "Control") {
            // IE < 9
            document.selection.createRange().pasteHTML(html);
        }
    };
</script> 

输出如下：