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

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

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

? ? <title></title>

? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

? </head>

? <body>

? ? ? <div id="div" contenteditable="true" style="width:300px;height:100px;border:1px solid #000"><br /></div>

? ? ? <input type="button" value="插入" onclick="test('测试一下')" onfocus="this.blur()" />

? ? ? <script type="text/javascript">

? ? ? ? ? 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>

? ? ? ? <title></title>

? ? ? ? <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

? ? </head>

? ? <body>

? ? ? ? <div id="div" contenteditable="true" style="width:300px;height:100px;border:1px solid #000"><br /></div>

? ? ? ? <input type="button" value="插入" onclick="test('测试一下')" onfocus="this.blur()" />

? ? ? ? <script type="text/javascript">

? ? ? ? ? ? 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等。