React富文本编辑器开发(九)位置

位置是指在使用Slate编辑器中进行插入、删除或执行其它操作时引用文档中特定位置的方式。有几种不同类型的位置接口,每种接口都用于不同的用例。

Path路径

路径是引用位置的最低级别的方法。每个路径都是一个简单的数字数组,它通过文档树下每个祖先节点中的索引来引用文档树中的一个节点。

typescript 复制代码
type Path = number[]

例如,在文档中:

javascript 复制代码
const editor = {
  children: [
    {
      type: 'paragraph',
      children: [
        {
          text: 'A line of text!',
        },
      ],
    },
  ],
}

叶子文本节点的路径为: [0, 0]。因为本文中只一个根节点,它又是根节点中的第一个节点,第一个节点中的第一个子节点。索引号都是从0开始的。

编辑器本身的路径为 []。 例如,若要选择编辑器的全部内容,请调用Transforms.select(editor, [])

Point插入点

这些路径的表述表具体,它包含了与特定文本节点的偏移量。它的接口标准为:

typescript 复制代码
interface Point {
  path: Path
  offset: number
}

针对于同一个文档,如果我们想引用第一个起点位置,我们就可以把光标放在它下面:

javascript 复制代码
const start = {
  path: [0, 0],
  offset: 0,
}

或如果我们引用句子的末尾:

javascript 复制代码
const end = {
  path: [0, 0],
  offset: 15,
}

这就表示光标在文本节点的第15个字符位置处。

Range范围

范围就是选中的内容的范围,在表述上有起点和终点,起点可能在终点前面也可以在终点后面,因为我们可能会正向选择,或反向选择。其接口标准为:

typescript 复制代码
interface Range {
  anchor: Point
  focus: Point
}

由一个锚点和一个焦点组成。都是Point类型。锚点是用户开始选择的位置,焦点是用户结束选择的位置。

注意,一个选择区域的锚点和焦点始终引用文档中的叶级文本节点,而从不引用元素。

Selection选择

当我们需要引用两点之间的内容范围时,Slate的API中的许多地方都使用了范围,不过,最常见的一种是用户当前的 "选择"。

选择是一个特殊的范围,是顶级编辑器的一个属性。例如,假设某人当前选择了整个句子:

javascript 复制代码
const editor = {
  selection: {
    anchor: { path: [0, 0], offset: 0 },
    focus: { path: [0, 0], offset: 15 },
  },
  children: [
    {
      type: 'paragraph',
      children: [
        {
          text: 'A line of text!',
        },
      ],
    },
  ],
}

又假如,要查找包含所有当前选择的最低块,请执行以下操作:

javascript 复制代码
function getCommonBlock(editor) {
  const range = Editor.unhangRange(editor, editor.selection, { voids: true })

  let [common, path] = SlateNode.common(
    editor,
    range.anchor.path,
    range.focus.path
  )

  if (Editor.isBlock(editor, common) || Editor.isEditor(common)) {
    return [common, path]
  } else {
    return Editor.above(editor, {
      at: path,
      match: n => Editor.isBlock(editor, n) || Editor.isEditor(n),
    })
  }
}
相关推荐
程序员爱技术1 小时前
Vue 2 + JavaScript + vue-count-to 集成案例
前端·javascript·vue.js
并不会2 小时前
常见 CSS 选择器用法
前端·css·学习·html·前端开发·css选择器
悦涵仙子2 小时前
CSS中的变量应用——:root,Sass变量,JavaScript中使用Sass变量
javascript·css·sass
衣乌安、2 小时前
【CSS】居中样式
前端·css·css3
兔老大的胡萝卜2 小时前
ppk谈JavaScript,悟透JavaScript,精通CSS高级Web,JavaScript DOM编程艺术,高性能JavaScript pdf
前端·javascript
低代码布道师2 小时前
CSS的三个重点
前端·css
耶啵奶膘3 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^5 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie5 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic6 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js