`

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等。
分享到：
| [javascript]浏览器下文本域光标的定位
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics