Javascript高级编程学习笔记(83)—— 富文本选区(3)
富文本选区
在富文本编辑器中使用 iframe 的 getSelection() 方法可以获取选中的文本
该方法是 window 对象和 document 对象的属性,调用后会返回一个当前选选择文本的 Selection 对象
selection 对象拥有下列属性:
- anchorNode: 选区起点所在节点
- anchorOffset:选区起点在其所在节点中的偏移量
- focusNode:选区终点所在节点
- focusOffest:选区终点在其所在节点中的偏移量
- isCollapsed:布尔值,表示选区的起点终点是否重合
- rangeCount:选区包含DOM节点的数量
拥有下列方法:
- addRange(range):将指定范围内的内容添加到选区
- collapse(node,offset):将选区折叠到指定节点的指定偏移处
- collapseToEnd():将选区折叠到选区终点的位置
- collapseToStart():将选区折叠到起点位置
- containsNode(node):确定指定节点是否包含在选区之内
- deleteFromDocument():从文档中删除选区中的文本
- extend(node,offset):将 focusNode 和 focusOffset 移动到指定位置来拓展选区
- getRangeAt(index): 返回所应对应选区中的DOM范围
- removeAllRanges():从选区中移除所有的DOM范围,该方法也会移除选区,因为选区中至少要有一个范围
- removeRange(range): 从选区中移除指定范围
- selectAllChildren(node):清除选区并选择指定节点的所有子节点
- toString():返回选区包含的指定文本
以下方代码为例:
let selection = frames["richedit"].getSelection(); // 取得选择的文本
let selectedText = selection.toString(); // 取得选区范围
let range = selection.getRangeAt(0); // 突出显示选择的文本
let span = frames["richedit"].document.createElement('span');
span.style.backgroundColor = "yellow";
range.surroundContents(span);
上方代码会为富文本编辑器中选中的文本添加黄色背景
表单与富文本
由于富文本编辑器不是使用表单控件实现的,因此从技术上来说富文本编辑器并不属于表单的一部分
所以我们在提交表单时富文本编辑器内的内容并不会随着一起提交,所以我们需要手工提取并提交富文本编辑器中的内容
如下所示:
let form = document.forms[0]; form.onsubmit = function(event){
let target = event.target; target.elements["comments"].value = document.getElementById("richedit").innerHtml; }
Javascript高级编程学习笔记(83)—— 富文本选区(3)的更多相关文章
- Javascript高级编程学习笔记(82)—— 富文本操作(2)
操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 ...
- Javascript高级编程学习笔记(81)—— 富文本(1)
富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...
- Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本
绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...
- Javascript高级编程学习笔记(76)—— 表单(4)选择文本
文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...
- Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件
键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...
- Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...
- Javascript高级编程学习笔记(37)—— DOM(3)Element
Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...
- Javascript高级编程学习笔记(35)—— DOM(1)节点
DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...
- Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型
JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...
随机推荐
- java 坑总结
1.Cannot find current proxy: Set 'exposeProxy' property on Advised to 'true' to make it available. 解 ...
- MVC Request生命周期(综合总结)
当用户在浏览器输入一个URL地址后,浏览器会发送一个请求到服务器.这时候在服务器上第一个负责处理请求的是IIS.然后IIS再根据请求的URL扩展名将请求分发给不同的处理程序处理. 流程如下: 当请求一 ...
- 安装mysql后,sql语句中表名区分大小写的问题
今天安装完mysql后,执行查询语句select * from user,结果报user表不存在,但是实际是存在的,查了一下才知道是因为mysql的my.cnf文件中少了一个大小写敏感的配置,若不配置 ...
- 基于角色的访问控制 (RBAC)权限管理
RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...
- Java 字符编码(二)Java 中的编解码
Java 字符编码(二)Java 中的编解码 java.nio.charset 包中提供了一套处理字符编码的工具类,主要有 Charset.CharsetDecoder.CharsetEncoder. ...
- Blog Part I
写随笔是不可能写的,这辈子都不可能写的. ——https://music.163.com/song?id=5039077 ============ Blog?不,并不擅长,毕竟Blog不是Novel, ...
- ACM(图论)——tarjan算法详解
---恢复内容开始--- tarjan算法介绍: 一种由Robert Tarjan提出的求解有向图强连通分量的线性时间的算法.通过变形,其亦可以求解无向图问题 桥: 割点: 连通分量: 适用问题: 求 ...
- 高斯混合模型(GMM) - 混合高斯回归(GMR)
http://www.zhihuishi.com/source/2073.html 高斯模型就是用高斯概率密度函数(正态分布曲线)精确地量化事物,将一个事物分解为若干的基于高斯概率密度函数(正态分布曲 ...
- 关于python的展望
在未接触这门课程以前,我完全对编程一类的操作毫无兴趣.但在短短的两星期时间里,我改变了想法,原因有二.其一是老师幽默,其二是课程实用性高.我希望课程以后可以继续沿用现在由浅入深,给予足够提示的方式,引 ...
- 关于下载calipso数据集以及用python将其读到记事本小结
今天终于把老板交代的事情忙完了,对于我这位计算机语言的小白来说,其中的艰辛不用说,一把辛酸泪啊!在有计算机语言经验的老手而言,我这些问题似乎也不能算是问题,但我却卡了很久,对此,想把自己所遇到的困难和 ...