在光标处插入正解

之前在网上也找过类似的资料，国内网站介绍的都是老掉牙的方法不兼容标准浏览器。正确的方法是正确运用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