• 绘就生态文明新画卷—甘南州造林绿化工作纪实 2019-08-20
  • 云南昭通垃圾污染问题严重 相关人员蒙骗检查被问责 2019-08-20
  • 炮制数万斤毒豆芽 广州三个黑作坊被警方捣毁 2019-08-02
  • 2018年5月后期资助项目结项名单 2019-08-01
  • 女性之声——全国妇联 2019-07-31
  • 你才是“蠢货”!土地是自然存在的地球的一部分,并不是人类劳动成果,哪来价值?土地不是劳动成果,没有价值,正如空气和阳光不是劳动成果,没有价值一样。懂吗... 2019-07-31
  • 学习贯彻落实习近平总书记重要讲话精神·奥一网(oeeee.com) 2019-07-23
  • 新生儿6种异常不用慌 2019-07-15
  • 海尔发行境外上市外资股获批 2019-07-15
  • 朝鲜将变得很富有?外媒驱动引擎是中国而非美国 2019-07-12
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-06-22
  • 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 宁夏11选5开奖结果:张茂

    编辑器开发之 Selection 对象的学习

    上一篇,介绍了 range 对象的一些属性和方法,了解了一些基本操作,现在来介绍另外一个重要的对象:selection 对象;

    MDN 的解释是:Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生;

    快乐彩开奖号码 www.752o.com 先来写一个基本的 HTML 结构:

      1 <div id="box" class="box" contenteditable="true">abcd<span>efghi</span>jk<p>mnop</p><span>qrstwvu</span>xyz</div>

    选中:

    image

    看下 selection 对象的信息:

      1 function getSel() {
      2   var sel = window.getSelection();
      3   // 如果有 range
      4   if (sel.rangeCount > 0) {
      5     var range = sel.getRangeAt(0);
      6     console.log(range.cloneContents());
      7   }
      8   console.log(sel);
      9 }
     10 

    未标题-1

    这里主要关注的有这几个属性:

    anchorNode:返回选区的开始位置所在的节点,这里是最外面的 div;

    anchorOffset:返回选区开始位置在开始节点中的位置;

    focusNode:返回选区的结束位置所在的节点,这里是 span 标签;

    focusOffset:返回选区的结束位置在结束节点中的位置;

    isCollapsed:返回选区的开始位置和结束位置是否相同,检测选区是否折叠;

    rangeCount:返回 range 对象的数量;

    注意:这个 rangeCount 总是存在的,无论页面有没有可变的区域,只要鼠标点击了任何位置,它都会变成 1;

    baseNode,baseOffset属性和 ahchorNode,anchorOffset相同;

    extentNode,extentOffset属性和 focusNode,focusOffset相同;

     

    Selection 对象的一些重要方法:

    getRangeAt(index):根据索引返回 range 对象,需要注意的一点是:其他浏览器都是只有一个选区,但是在 firefox下,可以有多个选区,操作是按住 shift 多??;

    collapse(parentNode, offset):折叠选区到某个位置,光标会在此处闪烁;

    现在把光标移动到 p 标签的第三个字符前面:

      1 function setCollapse() {
      2     var sel = window.getSelection();
      3     box.focus();
      4     var p = box.querySelector('p').firstChild;
      5     sel.collapse(p, 2); // 设置光标的位置在 p 标签的第三个字符前面
      6 
      7     if (sel.rangeCount > 0) {
      8       var range = sel.getRangeAt(0);
      9       console.log(range);
     10     }
     11   }

    未标题-2

    可以看到光标在字符 o 的前面闪烁;

    collapseToStart:将光标设置到选区的起点,这个没什么好说的;

    collapseToStart:将光标设置到选区的结束位置,这个也没啥好说的;

    selectAllChildren(node):将节点的所有子节点加入选区;

      1 function setSelectAllChildren() {
      2     var sel = window.getSelection();
      3     sel.selectAllChildren(box); // 把可编辑区的所有子节点纳入选区
      4 
      5     if (sel.rangeCount > 0) {
      6       var range = sel.getRangeAt(0);
      7       console.log(range.cloneContents());
      8     }
      9   }

    未标题-3

    可以看到所有的内容都放到选区内了;

    addRange(range):将选区加入到 selection:

      1 function addRange() {
      2     var sel = window.getSelection();
      3     sel.removeAllRanges();
      4     box.focus();
      5 
      6     // 将所有的子节点放到选区中
      7     var children = box.children;
      8     for(var i = 0; i < children.length; i++) {
      9       var range = document.createRange();
     10 
     11       console.log(children[i]);
     12       range.selectNode(children[i]);
     13       sel.addRange(range);
     14     }
     15 
     16     console.log(sel); // 打印 range 的数量
     17   }

    未标题-4

    这里是把所有的子节点放到选区中,但是好像只有 firefox 支持,其他的浏览器不支持多个 range;

    removeRange(range):删除指定的选区,只有 firefox 支持;

    removeAllRanges:删除所有的选区;

    deleteFromDocument:从页面中删除选区中的内容;

    selectionLanguageChange:当键盘的朝向发生改变后修改指针的Bidi优先级;

    toString:返回当前选区的纯文本内容;

    containsNode:判断某一个node是否为当前选区的一部分;

    posted on 2019-04-22 21:48 张茂 阅读(...) 评论(...) 编辑 收藏

    导航

    统计信息

  • 绘就生态文明新画卷—甘南州造林绿化工作纪实 2019-08-20
  • 云南昭通垃圾污染问题严重 相关人员蒙骗检查被问责 2019-08-20
  • 炮制数万斤毒豆芽 广州三个黑作坊被警方捣毁 2019-08-02
  • 2018年5月后期资助项目结项名单 2019-08-01
  • 女性之声——全国妇联 2019-07-31
  • 你才是“蠢货”!土地是自然存在的地球的一部分,并不是人类劳动成果,哪来价值?土地不是劳动成果,没有价值,正如空气和阳光不是劳动成果,没有价值一样。懂吗... 2019-07-31
  • 学习贯彻落实习近平总书记重要讲话精神·奥一网(oeeee.com) 2019-07-23
  • 新生儿6种异常不用慌 2019-07-15
  • 海尔发行境外上市外资股获批 2019-07-15
  • 朝鲜将变得很富有?外媒驱动引擎是中国而非美国 2019-07-12
  • 【加拿大房产网加拿大新房加拿大房产信息网】 2019-06-22
  • 中美研究人员发现新型狗流感病毒 2019-05-29
  • 豫园商城升级改造:这些楼顶可见最好的风景--旅游频道 2019-05-14
  • 头条 —频道 春城壹网 七彩云南 一网天下 2019-05-14
  • 人为某种意识而奋斗是幸福的,获得成绩或成就更幸福。 2019-05-10
  • 新时时彩历史开奖信息 大乐透最强的十专家 诗山时时彩后庄 22选5 pk10有正规网站吗 浙江11选5开奖信息 澳洲幸运5是官方开奖吗 21點玩法 快速时时官网 fg美人捕鱼作弊 万能七码3套 通比牛牛手机棋牌 pk直播 网络时时彩骗局揭秘 排列三字谜图谜今天 黑龙江时时500