execCommand("insertHTML", ...) in Internet Explorer

Question

I'm building a wysiwyg-editor with an editable iframe using document.execCommand(). Now i need to use the "insertHTML" command which works perfectly in Chrome and Firefox but of course it doesn't work in 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>

What is the standard solution to this problem? It's okay if it only works in IE8 but IE7-support would be nice too.

Solution 1

In IE <= 10 you can use the pasteHTML method of the TextRange representing the selection:

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>");
    }
}

UPDATE

In IE 11, document.selection is gone and insertHTML is still not supported, so you'll need something like the following:

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

Solution 2

In case you haven't found anything yet,

I had a button that would add html into an iframe, and was causing an error in IE8 when I clicked the button and no text was selected (i.e. when I had the blinking caret). It turned out that the button itself was getting selected (despite having unselectable="on"), and causing javascript to throw up the error. When I changed the button to a div (with unselectable on) it worked fine, in IE8 and FF.

Hope this helps.

Solution 3

I know this is extremely old, but since IE is still a problem, here is a better way which does not even use execCommand.

This is missing some checks, like ensuring you're in the right container to be adding an image.

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);

Solution 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";
};

View more solutions

Comments

[Solomon Duskis]

These bug reports imply that Edge supports execCommand("insertHTML", ..) (though with its own quirks).

[tundoopani]

IE seems to be adding the text to the very top of the page. Any idea why it's not being placed in the iframe specified by var doc?

[Tim Down]

@tundoopani: Not without more context. Do you have an example page?

[tundoopani]

I coded a simple version here: jsfiddle.net/MWz7A/3. In IE9, the content is not placed in the iframe editor.

[Dinei]

Method pasteHTML doesn't exist on range object, in my IE9

[Dinei]

Even this issue being old, this answer is the only one that worked for me. Thanks by sharing your knowledge.

[Dinei]

To those with the same issue, the @David answer is the only one that worked for me.

[David]

@dexiang The easy option is to not care about IE8 and below. :)