标签：Node Selection offset parentNode selection 设计 组件 Mentions 选区

前言

 

Mentions组件通常用在评论@某人。Antd是基于textarea实现，功能单一，无法对@xx进行样式设置。

功能

 

基础API熟悉

1.Range & Selection

在阅读上述Mdn文档后，我们有以下的点需要注意

1）如果当前已经有选区，则调用selection.addRange添加新的range会不生效，需要先取消选区

selection.removeRange(range)　　// 取消当前选区
selection.removeAllRanges()　　// 取消所有选区

 

2) Chrome 无法在一个Selection中添加多个Range

 

3）Selection.collapse(parentNode, offset)  offset 选项针对是否为文本节点，还是元素节点有不同的表现

解释：Selection.collapse() 方法可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面，则光标会在该处闪烁。

parentNode 为Node.Element_Node, 则offset为parentNode.childNodes 数组的偏移量

parentNode 为Node.Text_Node,则offset为文本节点字符偏移量

 

4）Selection.empty 与Selection.removeAllRanges 方法的不同之处

 Selection.empty 老的IE浏览器API，已废弃。取消选区使用removeAllRanges即可   5）Selection.getRangeAt(index) 使用这个API前，index需要位于[0, selection.rangeCount) 之间，否则会报错   6）

 

标签：Node,Selection,offset,parentNode,selection,设计,组件,Mentions,选区
From： https://www.cnblogs.com/cheng-up/p/17580550.html