Question

我正在使用document.execCommand()构建一个带有可编辑iframe的所见即所得编辑器。现在我需要使用"insertHTML"命令，该命令在Chrome和Firefox中完美运行，但当然它在Internet Explorer中不起作用：

function run() {
  document.getElementById("target").focus();
  document.execCommand("insertHTML", false, "<b>ins</b>");
}

<div contenteditable id="target">contenteditable</div>
<button onclick="run()">contenteditable.focus() + document.execCommand("insertHTML", false, "&lt;b>ins&lt;/b>")</button>

这个问题的标准解决方案是什么？没关系，如果它只适用于IE8，但IE7支持也会很好。

Answer 1

在IE＆lt; = 10中，您可以使用代表选择的pasteHTML TextRange方法：

var doc = document.getElementById("your_iframe").contentWindow.document;

if (doc.selection && doc.selection.createRange) {
    var range = doc.selection.createRange();
    if (range.pasteHTML) {
        range.pasteHTML("<b>Some bold text</b>");
    }
}

<强>更新

在IE 11中，document.selection消失，insertHTML仍然不受支持，因此您需要以下内容：

https://stackoverflow.com/a/6691294/96100

Answer 2

如果您还没有找到任何内容，

我有一个将html添加到iframe中的按钮，当我点击按钮并且没有选择任何文本时（即当我有闪烁的插入符号时）IE8中导致错误。事实证明，按钮本身已经被选中（尽管有“unselectable =”on“），并导致javascript抛出错误。当我将按钮更改为div（无法选择）时，它在IE8和FF中工作正常。

希望这有帮助。

Answer 3

我知道这是非常古老的，但由于IE仍然是一个问题，这是一种更好的方式，甚至不使用execCommand。

缺少一些检查，例如确保您在正确的容器中添加图像。

var sel = window.getSelection();
var range = sel.getRangeAt(0);
var frag = document.createDocumentFragment();
var img = document.createElement("img");
// add image properties here

frag.appendChild(img);
range.insertNode(frag);

Answer 4

var doc = document.getElementById("your_iframe").contentWindow.document;

// IE <= 10
if (document.selection){
    var range = doc.selection.createRange();
        range.pasteHTML("<b>Some bold text</b>");

// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
    var range = doc.getSelection().getRangeAt(0);
    var nnode = doc.createElement("b");
        range.surroundContents(nnode);
        nnode.innerHTML = "Some bold text";
};

Internet Explorer中的execCommand（“insertHTML”，...）

4 个答案: