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;

}