在光標處插入正解

之前在網上也找過類似的資料，國內網站介紹的都是老掉牙的方法不兼容標準瀏覽器。正確的方法是正確運用Selection對象和Range對象，實現在光標當前位置插入文本或結點。但是這兩個對象在IE和標準的DOM方式的運用方法是不同的。

思路：首先獲得用戶的選區（光標當前位置可理解成起始和終止位置一樣的選區）。然後，從Selection對象轉成Range對象。目的是利用Range對象的方法插內容進去。最後，插入動作結束後將光標移到插入內容的後面。

實現：IE下的Selection對象，var sel = win.document.selection;
DOM方式的Selection對象，var sel = win.getSelection();

var range = sel.createRange(); //IE下
var range = sel.getRangeAt(0); //DOM下


if(range.startContainer){ //DOM下

sel.removeAllRanges(); //刪除Selection中的所有Range
range.deleteContents(); //清除Range中的內容

//獲得Range中的第一個html結點
var container = range.startContainer;
//獲得Range起點的位移
var pos = range.startOffset;

//建一個空Range
range = document.createRange();

//插入內容
var cons = win.document.createTextNode(",:),");


if(container.nodeType == 3){//如是一個TextNode
container.insertData(pos, cons.nodeValue);

//改變光標位置
range.setEnd(container, pos + cons.nodeValue.length);
range.setStart(container, pos + cons.nodeValue.length);

}else{//如果是一個HTML Node
var afternode = container.childNodes[pos];

container.insertBefore(cons, afternode);

range.setEnd(cons, cons.nodeValue.length);
range.setStart(cons, cons.nodeValue.length);
}

sel.addRange(range);

}
else{//IE下
var cnode = range.parentElement();
while(cnode.tagName.toLowerCase() != "body"){
cnode = cnode.parentNode;
}
if(cnode.id && cnode.id=="rich_txt_editor"){
range.pasteHTML(",:),");
}
}

win.focus();

[DEMO] http://listenpro.googlepages.com/editor_demo_insert.html

轉載:http://blog.360.yahoo.com/blog-sOW1QOA9crUyOdXFxOeK4xc-?cq=1&p=55#comments