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.

[These](https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7536602/) [bug reports](https://github.com/yabwe/medium-editor/issues/771#issuecomment-182233090) imply that Edge supports execCommand("insertHTML", ..) (though with its own quirks). — Nickolay, Jan 01 '18 at 11:05

score 15 · Accepted Answer · edited May 23 '17 at 12:10

15

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

edited May 23 '17 at 12:10

Community

1
1

answered Aug 03 '10 at 16:07

Tim Down

318,141
75
454
536

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? – tundoopani Oct 18 '11 at 21:45
@tundoopani: Not without more context. Do you have an example page? – Tim Down Oct 19 '11 at 00:03
I coded a simple version here: http://jsfiddle.net/MWz7A/3/. In IE9, the content is not placed in the iframe editor. – tundoopani Oct 22 '11 at 02:48

score 3 · Answer 2 · answered Dec 09 '10 at 16:24

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.

score 2 · Answer 3 · edited Feb 08 '18 at 17:30

2

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

edited Feb 08 '18 at 17:30

nephiw

1,964
18
38

answered Dec 24 '14 at 21:36

David

4,744
5
33
64

1

Even this issue being old, this answer is the only one that worked for me. Thanks by sharing your knowledge. – Dinei Nov 13 '15 at 13:43
@dexiang The easy option is to not care about IE8 and below. :) – David May 14 '16 at 20:01

score 1 · Answer 4 · edited Dec 21 '13 at 13:12

1

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

edited Dec 21 '13 at 13:12

codingrose

15,563
11
39
58

answered Dec 21 '13 at 12:53

user3126867

610
5
8

Method `pasteHTML` doesn't exist on `range` object, in my IE9 – Dinei Nov 13 '15 at 13:17
To those with the same issue, the [@David answer](http://stackoverflow.com/a/27642361/3136474) is the only one that worked for me. – Dinei Nov 13 '15 at 13:44

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

4 Answers4

Linked