编辑器开发之 Selection 对象的学习
上一篇,介绍了 range 对象的一些属性和方法,了解了一些基本操作,现在来介绍另外一个重要的对象:selection 对象;
MDN 的解释是:Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生;
先来写一个基本的 HTML 结构:
<div id="box" class="box" contenteditable="true">abcd<span>efghi</span>jk<p>mnop</p><span>qrstwvu</span>xyz</div>
选中:
看下 selection 对象的信息:
function getSel() {
var sel = window.getSelection();
// 如果有 range
if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
console.log(range.cloneContents());
}
console.log(sel);
}
这里主要关注的有这几个属性:
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 标签的第三个字符前面:
function setCollapse() {
var sel = window.getSelection();
box.focus();
var p = box.querySelector('p').firstChild;
sel.collapse(p, 2); // 设置光标的位置在 p 标签的第三个字符前面 if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
console.log(range);
}
}
可以看到光标在字符 o 的前面闪烁;
collapseToStart:将光标设置到选区的起点,这个没什么好说的;
collapseToStart:将光标设置到选区的结束位置,这个也没啥好说的;
selectAllChildren(node):将节点的所有子节点加入选区;
function setSelectAllChildren() {
var sel = window.getSelection();
sel.selectAllChildren(box); // 把可编辑区的所有子节点纳入选区 if (sel.rangeCount > 0) {
var range = sel.getRangeAt(0);
console.log(range.cloneContents());
}
}
可以看到所有的内容都放到选区内了;
addRange(range):将选区加入到 selection:
function addRange() {
var sel = window.getSelection();
sel.removeAllRanges();
box.focus(); // 将所有的子节点放到选区中
var children = box.children;
for(var i = 0; i < children.length; i++) {
var range = document.createRange(); console.log(children[i]);
range.selectNode(children[i]);
sel.addRange(range);
} console.log(sel); // 打印 range 的数量
}
这里是把所有的子节点放到选区中,但是好像只有 firefox 支持,其他的浏览器不支持多个 range;
removeRange(range):删除指定的选区,只有 firefox 支持;
removeAllRanges:删除所有的选区;
deleteFromDocument:从页面中删除选区中的内容;
selectionLanguageChange:当键盘的朝向发生改变后修改指针的Bidi优先级;
toString:返回当前选区的纯文本内容;
containsNode:判断某一个node是否为当前选区的一部分;
编辑器开发之 Selection 对象的学习的更多相关文章
- 编辑器开发之 Range 范围对象的学习
写在前面: 网上有各种富文本编辑器,微博分享等操作,这些功能非常实用,他们就是使用 range,selection 对象来实现的,这两个对象偏冷门,不涉及编辑器一般用不到,range 对象是对选区的操 ...
- j2ee开发之Spring2.5框架学习笔记
Spring 2.5框架学习笔记 1.是一个开源的控制反转IOC和面向切面AOP的容器框架 2.IOC控制反转 public class PersonServiceBean { private Per ...
- ArcGIS AddIN开发之COM对象写入注册表
做一个交互式绘制文字的工具,希望这次设置的Symbol,下次打开ArcMap时自动调用这个Symbol,并支持对其进行修改. 解决方法是将这个Symbol写入注册表中,每次自动读取上一次设置的Symb ...
- Qgis插件开发之Qgis源码学习
Qgis源码中的拖拽.zoomin/out等各个基础功能插件的实现位于qgis_app工程中. 具体头文件为: \QGIS\src\app\qgisapp.h 根据此类可以逐个找到Qgis的基础插件的 ...
- Qt开发之Hello Qt及学习小技巧
创建第一个Qt程序的简单流程 如果安装了andriod或ios的版本也会显示出来,这里只显示了桌面端的 一个项目文件代码结构如下: 如下图可直接编辑label里的文字内容: 运行结果:(快捷键ctrl ...
- 高效开发之SASS篇 灵异留白事件——图片下方无故留白 你会用::before、::after吗 link 与 @import之对比 学习前端前必知的——HTTP协议详解 深入了解——CSS3新增属性 菜鸟进阶——grunt $(#form :input)与$(#form input)的区别
高效开发之SASS篇 作为通往前端大神之路的普通的一只学鸟,最近接触了一样稍微高逼格一点的神器,特与大家分享~ 他是谁? 作为前端开发人员,你肯定对css很熟悉,但是你知道css可以自定义吗?大家 ...
- ios开发之OC基础-类和对象
本系列的文章主要来自于个人在学习前锋教育-欧阳坚老师的iOS开发教程之OC语言教学视频所做的笔记,边看视频,边记录课程知识点.建议大家先过一遍视频,在看视频的过程中记录知识点关键字,把把握重点,然后再 ...
- ArcGIS Engine开发之旅09--几何对象和空间参考
原文:ArcGIS Engine开发之旅09--几何对象和空间参考 1.Geometry Geometry 是 GIS 中使用最为广泛的对象集之一,用户在创建.删除.编辑和进行地理分析的时候,就是处 ...
- ArcGIS Engine开发之旅08--和查询相关的对象和接口
原文:ArcGIS Engine开发之旅08--和查询相关的对象和接口 查询在GIS领域应该是一个很频繁的操作,在GIS中除了具有属性查询(和其他关系型数据库的查询类似),还提供了空间查询.在介绍查询 ...
随机推荐
- Collection集合详解
/*Collection--List:元素是有序的,元素可以重复.因为该集合体系有索引. ---ArrayList;底层的数据结构使用的是数组结构.特点:查询速度很快.但是增删很慢.线程不同步 --- ...
- [html]------行内元素与块级元素
块级元素(block element)div -最常用的块级元素dl - 和dt dd搭配使用的块级元素form - 交互表单h1 - 大标题hr - 水平分隔线ol - 排序表单p - 段落ul - ...
- c# 如何读取web.config中的内容(ConfigurationManager)
1.web.config中写入 <appSettings> <add key="TokenQPark" value="http://localho ...
- nsqlookupd.go
) } l.Lock() l.httpListener = httpListener l.Unlock() httpServer := newHTTPServe ...
- 【HEOI 2018】Day2 T2 林克卡特树
题目大意: 给一个n个节点的树,然后将其分成k+1个联通块,再在每个联通块取一条路径,将其连接起来,求连接起来的路径最大权值. 题解: 考场只会20分,还都打挂了…… 60分的做法其实并不难,nk D ...
- bzoj [Noi2002]Savage 扩展欧几里得
枚举m,n^2判断 对于野人i,j,(H[i]+x*S[i])%m==(H[j]+x*S[j])%m,且x<=O[i]&&x<=O[j],他们才有可能相遇 化简得:(S[i ...
- ES6知识整理(1)--let和const命令
最近准备在业余空闲时间里一边学习ES6,一边整理相关知识.只有整理过的学习才是有效的学习.也就是学习之后要使用和整理成文,才是正在的学到了... 那么现在开始 LINK START!(首先是第一讲,前 ...
- 查看Linux下系统资源占用常用命令(top、free、uptime)
本文介绍下,在linux中查看系统资源占用的三个命令:top.free.uptime,通过实例学习下它们的用法,有需要的朋友参考下 一,top命令 1.作用top命令用来显示执行中的程序进程,使用权限 ...
- show()封装没有想象中那么简单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- ruby整理
参考博客:https://www.cnblogs.com/felixzh/p/8081622.html 官网地址 https://rvm.io/rvm/install 一.前提 centos6.8下 ...