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

Question

Ich baue einen WYSIWYG-Editor mit einem editierbaren iFrame mit document.execCommand(). Jetzt muss ich den "insertHTML" Befehl verwenden, die perfekt in Chrome und Firefox funktioniert, aber natürlich ist es nicht in Internet Explorer arbeiten:

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>

Was ist die Standardlösung für dieses Problem? Es ist in Ordnung, wenn es nur in IE8 funktioniert, aber IE7-Unterstützung wäre auch nett.

Answer 1

In IE < = 10 können Sie die pasteHTML Methode der die Auswahl darstellt TextRange verwenden:

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 ist weg und insertHTML wird noch nicht unterstützt, Sie benötigen also beispielsweise Folgendes:

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

Answer 2

Falls Sie noch nichts gefunden,

ich einen Knopf hatte, die HTML-Code in einem iframe hinzufügen würde, und wurde ein Fehler in IE8 zu verursachen, wenn ich den Knopf und kein Text ausgewählt wurde angeklickt (d als ich das blinkende Caret hatte). Es stellte sich heraus, dass der Button selbst selektiert wurde (obwohl wir unselectable = "on" gesetzt hatten) und Javascript den Fehler verursachte. Als ich den Button in ein div umwandelte (mit unselectable on), funktionierte es in IE8 und FF gut.

Hoffe, das hilft.

Answer 3

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

Answer 4

Ich weiß, das sehr alt ist, aber da IE immer noch ein Problem ist, ist hier eine bessere Art und Weise, die nicht einmal execCommand zu verwenden ist.

Es fehlen einige Überprüfungen, z. B. um sicherzustellen, dass Sie sich im richtigen Container befinden, um ein Bild hinzuzufügen.

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