富文本选区

在富文本编辑器中使用 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)的更多相关文章

  1. Javascript高级编程学习笔记(82)—— 富文本操作(2)

    操作富文本 与富文本编辑器的交互的主要方式就是使用 document.execCommand() 方法 该方法可以对文档执行自定义命令,并且可以应用大多数格式 该方法接收三个参数: 要执行命令的名称 ...

  2. Javascript高级编程学习笔记(81)—— 富文本(1)

    富文本编辑 富文本编辑又称为: WYSIWYG(What You See Is What You Get,所见即所得) 常用于博客等用途,虽然没有规范,但是在IE最先引入后其他的浏览器厂商也相继完成了 ...

  3. Javascript高级编程学习笔记(88)—— Canvas(5)绘制文本

    绘制文本 同样的,canvas也为绘制文本提供了相应的方法. 2D上下文提供的文本绘制方法主要有两个: fillText() strokeText() 这两个方法都接受四个参数 要绘制的文本字符串 绘 ...

  4. Javascript高级编程学习笔记(76)—— 表单(4)选择文本

    文本框脚本 在HTML中文本框有两种实现方式: <input> <textarea> 这两种实现方式虽然在多数情况下表现一致,但是两者之间仍存在许多重要区别 对于<inp ...

  5. Javascript高级编程学习笔记(64)—— 事件(8)键盘与文本事件

    键盘与文本事件 用户在使用键盘时会触发键盘事件 “DOM2级事件”最初规定了键盘事件,但是最后在定稿时又删除了相应内容 所以键盘事件被放入了DOM3级事件的规范中 总的来说有三个键盘事件: keydo ...

  6. Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历

    遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...

  7. Javascript高级编程学习笔记(37)—— DOM(3)Element

    Element类型 除了Document类型之外,Element类型应该就是web编程中最常用的类型了 Element类型主要用于表现XML.HTML元素,提供对元素标签名.子节点以及特性的访问 特性 ...

  8. Javascript高级编程学习笔记(35)—— DOM(1)节点

    DOM JS由三部分组成 1.BOM 2.DOM 3.ECMAScript ES和BOM在前面的文章已经介绍过了 今天开始JS组成的最后一部分DOM(文档对象模型) 我们知道,JS中的这三个部分实际上 ...

  9. Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型

    JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...

随机推荐

  1. java 坑总结

    1.Cannot find current proxy: Set 'exposeProxy' property on Advised to 'true' to make it available. 解 ...

  2. MVC Request生命周期(综合总结)

    当用户在浏览器输入一个URL地址后,浏览器会发送一个请求到服务器.这时候在服务器上第一个负责处理请求的是IIS.然后IIS再根据请求的URL扩展名将请求分发给不同的处理程序处理. 流程如下: 当请求一 ...

  3. 安装mysql后,sql语句中表名区分大小写的问题

    今天安装完mysql后,执行查询语句select * from user,结果报user表不存在,但是实际是存在的,查了一下才知道是因为mysql的my.cnf文件中少了一个大小写敏感的配置,若不配置 ...

  4. 基于角色的访问控制 (RBAC)权限管理

    RBAC(Role-Based Access Control,基于角色的访问控制),就是用户通过角色与权限进行关联.简单地说,一个用户拥有若干角色,每一个角色拥有若干权限.这样,就构造成“用户-角色- ...

  5. Java 字符编码(二)Java 中的编解码

    Java 字符编码(二)Java 中的编解码 java.nio.charset 包中提供了一套处理字符编码的工具类,主要有 Charset.CharsetDecoder.CharsetEncoder. ...

  6. Blog Part I

    写随笔是不可能写的,这辈子都不可能写的. ——https://music.163.com/song?id=5039077 ============ Blog?不,并不擅长,毕竟Blog不是Novel, ...

  7. ACM(图论)——tarjan算法详解

    ---恢复内容开始--- tarjan算法介绍: 一种由Robert Tarjan提出的求解有向图强连通分量的线性时间的算法.通过变形,其亦可以求解无向图问题 桥: 割点: 连通分量: 适用问题: 求 ...

  8. 高斯混合模型(GMM) - 混合高斯回归(GMR)

    http://www.zhihuishi.com/source/2073.html 高斯模型就是用高斯概率密度函数(正态分布曲线)精确地量化事物,将一个事物分解为若干的基于高斯概率密度函数(正态分布曲 ...

  9. 关于python的展望

    在未接触这门课程以前,我完全对编程一类的操作毫无兴趣.但在短短的两星期时间里,我改变了想法,原因有二.其一是老师幽默,其二是课程实用性高.我希望课程以后可以继续沿用现在由浅入深,给予足够提示的方式,引 ...

  10. 关于下载calipso数据集以及用python将其读到记事本小结

    今天终于把老板交代的事情忙完了,对于我这位计算机语言的小白来说,其中的艰辛不用说,一把辛酸泪啊!在有计算机语言经验的老手而言,我这些问题似乎也不能算是问题,但我却卡了很久,对此,想把自己所遇到的困难和 ...