之前做一个编辑器,需要实现在<pre>中按下tab的时候插入四个空格,因为js是半路出家,研究了好久。思路是获取当前的selection,拿到对应的range,对range进行操作后替换掉原来selection对应的range。
下文是从 Kejun’s Blog 转来的 [javascript]在光标处插入正解 ,给大家一个思路:
之前在网上也找过类似的资料,国内网站介绍的都是老掉牙的方法不兼容标准浏览器。正确的方法是正确运用Selection对象和Range对象,实现在光标当前位置插入文本或结点。但是这两个对象在IE和标准的DOM方式的运用方法是不同的。
思路:首先获得用户的选区(光标当前位置可理解成起始和终止位置一样的选区)。然后,从Selection对象转成Range对象。目的是利用Range对象的方法插内容进去。最后,插入动作结束后将光标移到插入内容的后面。
实现:
var sel = window.document.selection; //IE下的Selection对象
var sel = window.getSelection(); //DOM方式的Selection对象
var range = sel.createRange(); //IE下
var range = sel.getRangeAt(0); //DOM下
//DOM下
if(range.startContainer){
sel.removeAllRanges(); //删除Selection中的所有Range
range.deleteContents(); //清除Range中的内容
//获得Range中的第一个html结点
var container = range.startContainer;
//获得Range起点的位移
var pos = range.startOffset;
//建一个空Range
range = document.createRange();
//插入内容
var cons = window.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(“,:),”);
}
window.focus();
}