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

Question

Tôi đang xây dựng trình soạn thảo wysiwyg với khung nội tuyến có thể chỉnh sửa bằng cách sử dụng document.execCommand(). Bây giờ tôi cần phải sử dụng lệnh "insertHTML" mà hoạt động hoàn hảo trong Chrome và Firefox nhưng tất nhiên nó không hoạt động trong 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>

dung dịch chuẩn cho vấn đề này là gì? Không sao nếu nó chỉ hoạt động trong IE8 nhưng hỗ trợ IE7 cũng sẽ tốt hơn.

Answer 1

Trong IE < = 10 bạn có thể sử dụng phương pháp pasteHTML của TextRange đại diện cho sự lựa chọn:

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

CẬP NHẬT

Trong IE 11, document.selection đã biến mất và insertHTML vẫn không được hỗ trợ, vì vậy bạn sẽ cần một cái gì đó như sau:

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

Answer 2

Trong trường hợp bạn đã không tìm thấy bất cứ điều gì chưa,

Tôi đã có một nút đó sẽ thêm html vào iframe và đã gây ra một lỗi trong IE8 khi tôi nhấp vào nút và không có văn bản được lựa chọn (ví dụ: khi tôi có dấu nháy mắt). Nó bật ra rằng nút chính nó đã nhận được lựa chọn (mặc dù có unselectable = "trên"), và gây javascript để ném lên các lỗi. Khi tôi thay đổi nút để một div (với unelectable trên) nó làm việc tốt, trong IE8 và FF.

Hy vọng điều này sẽ hữu ích.

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

Tôi biết điều này là rất cũ, nhưng vì IE vẫn là một vấn đề, đây là cách tốt hơn thậm chí không sử dụng execCommand.

Điều này thiếu một số kiểm tra, như đảm bảo bạn đang ở đúng nơi để thêm hình ảnh.

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