JavaScript Range用来开发类似于百度贴吧和webqq的编辑器

最新推荐文章于 2019-03-30 23:00:09 发布

dalaoshu321

最新推荐文章于 2019-03-30 23:00:09 发布

阅读量89

点赞数

分类专栏： javascript 文章标签： javascript 设计模式 ViewUI

本文链接：https://blog.csdn.net/dalaoshu321/article/details/84395577

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

发表于 2010-10-15 17:50:12 | 只看该作者 | 倒序浏览

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);插入后光标位于插入内容的后面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

</head>

<body>

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();

}

</script>

</body>

</html>

提示：您可以先修改部分代码再运行

firefox/谷歌等支持标准的浏览器在光标位置插入html，稍微麻烦些

<html>

<head>

</head>

<body>

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)

}