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

Question

Я создаю wysiwyg-редактор с редактируемым iframe с использованием document.execCommand(). Теперь мне нужно использовать команду "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 <= 10 вы можете использовать <code>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";
};