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

Я создаю 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 тоже была бы хорошей.

6
internet-explorer internet-explorer-8 javascript

4 ответов

в IE 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

14

в случае, если вы еще ничего не нашли,

У меня была кнопка, которая добавляла html в iframe, и вызывала ошибку в IE8, когда я нажимал кнопку, и текст не был выбран (т. е. когда у меня был мигающий курсор). Оказалось, что сама кнопка выбирается (несмотря на то, что она не выбрана="on") и вызывает ошибку javascript. Когда я изменил кнопку на div (с unselectable on), она работала нормально, в IE8 и FF.

надеюсь, что это помогает.

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