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

2012年1月17日 发表评论 阅读评论

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>


转载请注明来自:[MSN Spaces]http://msn.shandian.biz/13.html

  1. 本文目前尚无任何评论.