正確的方法是正確運用Selection對象和Range對象,實現在光標當前位置插入文本或結點。但是這兩個對象在IE和標準的DOM方式的運用方法是不同的。
思路:首先獲得用戶的選區(光標當前位置可理解成起始和終止位置一樣的選區)。然後,從Selection對象轉成Range對象。目的是利用Range對象的方法插內容進去。最後,插入動作結束後將光標移到插入內容的後面。
01
var sel = win.document.selection; //IE
02
var sel = win.getSelection(); //DOM
03
04
var range = sel.createRange(); // IE下
05
var range = sel.getRangeAt(0); // DOM下
06
07
if(range.startContainer){ // DOM下
08
sel.removeAllRanges(); // 刪除Selection中的所有Range
09
range.deleteContents(); // 清除Range中的內容
10
// 獲得Range中的第一個html結點
11
var container = range.startContainer;
12
// 獲得Range起點的位移
13
var pos = range.startOffset;
14
// 建一個空Range
15
range = document.createRange();
16
// 插入內容
17
var cons = win.document.createTextNode(",:),");
18
19
if(container.nodeType == 3){// 如是一個TextNode
20
container.insertData(pos, cons.nodeValue);
21
// 改變光標位置
22
range.setEnd(container, pos + cons.nodeValue.length);
23
range.setStart(container, pos + cons.nodeValue.length);
24
}else{// 如果是一個HTML Node
25
var afternode = container.childNodes[pos];
26
container.insertBefore(cons, afternode);
27
28
range.setEnd(cons, cons.nodeValue.length);
29
range.setStart(cons, cons.nodeValue.length);
30
}
31
sel.addRange(range);
32
}else{// IE下
33
var cnode = range.parentElement();
34
while(cnode.tagName.toLowerCase() != “body”){
35
cnode = cnode.parentNode;
36
}
37
if(cnode.id && cnode.id==”rich_txt_editor”){
38
range.pasteHTML(",:),");
39
}
40
}
41
win.focus();
innerHTML 和 pasteHTML 區別
innerHTML 是一個屬性,可以取得或者設定該元素內的 HTML 內容,可以是任意能包含 HTML 子節點的元素都使用它
pasteHTML()是一個方法,在指定的文字區域內替換該區域內的文本或者HTML,該方法必須應用於一個 createTextRange() 或者 document.selection.createRange() 創建的區域上
1
var oRange = document.selection.createRange();
2
if(oRange.text!=''){
3
var oHtml = '<a href="#" target=_blank>oRange.text</a>';
4
oRange.pasteHTML(oHtml);
5
}
摘自 JSON