js selection range 插入空节点后调整光标位置 - 富文本编辑器
1.给用作富文本编辑的div添加contenteditable属性。
2.给表情图片添加click事件（我是把img表情放在li下的），div获取焦点，_insertimg()锁定编辑器中光标的位置，参数是img，也可以是文本。
$("#Modal .emoji-list li").click(function(event) {
var emoji = $(this).find("img").attr('src');
$("#editor").focus();
var source = '';
_insertimg(source);
});
function _insertimg(str){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
if (!window.getSelection){
document.getElementById('editor').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(str);
range.collapse(false);
range.select();
}
else{
document.getElementById('editor').focus();
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
}
Range，这是个很容易被人忽略的东西，在开发富文本编辑器时会经常用到。使用iframe设计模式或div的 contenteditable=“true” 。
webqq和百度贴吧都没使用iframe制作编辑器，都用了div，是因为iframe设计模式和documen.domain冲突。contenteditable属性现在除了火狐2.0不支持，其他都可以。（使用FF2.0访问百度贴吧和webqq将无法发帖、聊天）。
关键地方时光标位置的保存，光标位置的插入html和表情，小弟研究了几天，有些收获，所以抛砖引玉献丑了。
1首先要getSelection（获取选中文字），IE是有一套自己的办法，所以要判断 -selection= (window.getSelection) ? window.getSelection() : document.selection;
2然后创建Range对象 selection.createRange ? selection.createRange() : selection.getRangeAt(0); selection在第一步获取
光标位置插入html. IE 很简单 直接 pasteHTML(''),即可，简单方便。 但要注意，点击插入时候编辑器已经失去焦点。（后面会在失去焦点时候保存下range）；
range.collapse(false);插入后光标位于插入内容的后面
function test(str){
if(!document.all){
alert("仅在IE中可以查看");
return;
}
document.getElementById('div').focus();
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
range.pasteHTML(str);
range.collapse(false);
range.select();
}
firefox/谷歌等支持标准的浏览器在光标位置插入html，稍微麻烦些
function test(str){
var selection= window.getSelection ? window.getSelection() : document.selection;
var range= selection.createRange ? selection.createRange() : selection.getRangeAt(0);
if (!window.getSelection){alert("请在支持w3c标准的浏览器查看")}
else{
document.getElementById('div').focus();
range.collapse(false);
var hasR = range.createContextualFragment(str);
var hasR_lastChild = hasR.lastChild;
while (hasR_lastChild && hasR_lastChild.nodeName.toLowerCase() == "br" && hasR_lastChild.previousSibling && hasR_lastChild.previousSibling.nodeName.toLowerCase() == "br") {
var e = hasR_lastChild;
hasR_lastChild = hasR_lastChild.previousSibling;
hasR.removeChild(e)
}
range.insertNode(hasR);
if (hasR_lastChild) {
range.setEndAfter(hasR_lastChild);
range.setStartAfter(hasR_lastChild)
}
selection.removeAllRanges();
selection.addRange(range)
}
}
我也在搞编辑器，忙了一个大晚上，w3c的range移动到空标签很容易的，setStartAfter方法传入的节点里并不需要一定有子节点的，只要offset设成0即可，range.setStartAfter(strongNode,0)，表示开始移动到strongNode的第一个子节点(并不一定有)之前，再collapse(true);合并到开头。
备注一下我对offset注释，如果也有人搜索到这里可以参考一下：
偏移量计算，节点和文字一样<span>AB</span><span>AB</span>中的位置：
【0】<span>[0]A[1]B[2]</span>【1】<span>[0]A[1]B[2]</span>【2】
由于发现IE8的TextRange光标移动到空标签处理不像w3c那么简单，我就搜索到这里了，怎样才能让TextRange移动到空标签里头啊，不知道楼主实现了没有，能分享一下吗？
lastNode == null的时候你指定一个值比如
if(lastNode == null){
lastNode = "空":
}
以后每次获取标签节点值的时候用"空"判断一下
楼主问题解决了吗？
酉终甘风： 好像知道原因了.我其实是在实现一个富文本编辑器.因为没有把可编辑区域放到一个iframe中,所以,在选区的设置方面做得很复杂,走了弯路.今天不早了,明天再改吧.
宁都县13566578387： javascript如何将html代码转为Range对象？
酉终甘风： 让我来告诉你答案!从Selection对象创建Range对象 在IE浏览器下,userSelection是TextRange,在现代浏览器下,userSelection仍然是Selection对象,要想同样创建和Selection对象内容一样的Range对象可以使用类似下面代码: 复制代码代...
宁都县13566578387： js Range如何获取选中的内容是文本还是a标签 - ？
酉终甘风： 可以通过//var aArr = div.getElementsByTagName('a');//for(var i=0; i<aArr.length; i++){ var aObj = aArr[i];} } else if (document.selection) { //IE浏览器 考虑到Opera,应该放在后面 userSelection = document.selection.createRange(); var text = userSelection.text;//获得文本 var htmlText = userSelection.htmlText;//获得包含标签的内容 }
宁都县13566578387： javascript光标range对象问题 - ？
酉终甘风： var sel = window.getSelection(), range; if (sel.getRangeAt && sel.rangeCount) { range = sel.getRangeAt(0); range.deleteContents(); var el = document.createElement(＂div＂); el.innerHTML = ＂<ul><li>\u200B</li></ul>＂; //\u200B为空文本节点,...
宁都县13566578387： js selection range 插入空节点后调整光标位置 - 富文本编辑器 - ？
酉终甘风： 小声的问一句:楼主的问题解决了吗?我也在搞编辑器,忙了一个大晚上,w3c的range移动到空标签很容易的,setStartAfter方法传入的节点里并不需要一定有子节点的,只要offset设成0即可,range.setStartAfter(strongNode,0),表示开始移动...
宁都县13566578387： 用javascript 选择文本时,如何指定选择区域!高手赐教!!! - ？
酉终甘风： var range=document.selection.createRange(); if(range.startContainer.parentNode.tagName=='input'&&range.endContainer.parentNode.tagName=='input'||range.startContainer.parentNode.tagName=='textarea'&&range.endContainer.parentNode.tagName=='textarea') { var text=range.text; …… } 希望能帮到你
宁都县13566578387： javascript在文字中插入<span>,触发事件为文字添加<span>标签 - ？
酉终甘风： 你可以结合 onselectstart和onmouseup这两个事件监听鼠标动作 . 致于插入span,可以使用: var o = event.target || event.srcElement; 来获得选中的文本所在的位置入的DOM,在这个DOM后面添加span标签就可以了. 你可以借助脚本框架来实现,例如JSer, jQuery等 都可以.
宁都县13566578387： 用js给选中文本添加链接 - ？
酉终甘风： r = html.replace(text, urlText); editer.innerHTML=r 这两句改成 r = html.replace(new RegExp(text, ＂g＂), urlText); editer.innerHTML=r; document.getElementById(＂isUrl＂).focus();
宁都县13566578387： js ,控制光标位置 - ？
酉终甘风： 1、获取光标位置 function getCursortPosition (ctrl) {//获取光标位置函数 var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange (); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel....
宁都县13566578387： js 获取选中内容中含有的html标签 - ？
酉终甘风： 最近遇到这个问题,楼上没有给出答案,为了以后百度方便,回答一下.看了JQuery,里边想要获取html内容需要提供标签或id或class,并不能解决该问题.<br>if (window.getSelection) { //现代浏览器<br> userSelection = window.getSelection();...
