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

wangxiaoxu

浏览: 565255 次
性别:
来自: 北京

最近访客更多访客>>

loginboot

healthylife

lwj_199011

nanber1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2015-11 ( 37)
2015-10 ( 13)
2015-09 ( 10)
更多存档...

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

博客分类：

javascript

发表于 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)

}

</script>

</body>

</html>

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

W3C标准的这个也下周再做注释

要下班了，下周继续吧。会有编辑器要重新定义回车、获取选中的内容以替换、粘贴html图片时候过滤、保存range等。

分享到：

富文本web在线编辑器实现关键技术pasteHTM ... | [javascript]浏览器下文本域光标的定位

2013-02-26 17:30
浏览 934
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

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

评论

发表评论

相关推荐

40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三

241个jquery插件—jquery插件大全

前端ui的js框架

2014 年最火的21个JavaScript框架

Bootstrap 栅格系统

自定义Bootstrap

使用python/casperjs编写终极爬虫-客户端App的抓取

使用Selenium和PhantomJS解析带JS的网页

数据抓取的艺术（一）：Selenium+Phantomjs数据抓取环境配置

ubuntu12.04 下安装nodejs【整理】

Ubuntu安装nodeJS

纯js页面跳转整理

细说Cookie

JavaScript Source Map 详解

主题：50个令人惊奇的jQuery插件

jquery触发事件

jquery事件命名空间

jQuery的事件命名空间-Namespaced Events

JQuery自定义事件的应用 JQuery最佳实践

jquery插件开发

最近访客更多访客>>