Draft.js 核心概念解析：SelectionState 选择状态管理-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00909/article/details/148361943

Draft.js 核心概念解析：SelectionState 选择状态管理

draft-js A React framework for building text editors. 项目地址: https://gitcode.com/gh_mirrors/dra/draft-js

什么是 SelectionState

在 Draft.js 富文本编辑框架中，SelectionState 是一个不可变(Immutable)的数据结构，用于精确表示编辑器中的文本选择范围。它继承自 Immutable.js 的 Record 类型，提供了丰富的 API 来操作和查询选择状态。

选择范围的基本概念

锚点(Anchor)与焦点(Focus)

每个选择范围都由两个关键点定义：

锚点(Anchor)：用户开始选择的位置
焦点(Focus)：用户结束选择的位置

这种表示方式与 DOM 原生的 Selection API 保持一致。当用户从左到右选择文本时，锚点在左，焦点在右；反向选择时则相反。

键(Key)与偏移量(Offset)

Draft.js 使用不同于 DOM 的方式标识选择位置：

Key：对应 ContentBlock 的唯一标识符
Offset：字符在块内的偏移量

这种抽象使得 Draft.js 可以独立于 DOM 操作选择状态，提高了跨平台兼容性。

关键方法解析

获取选择范围信息

// 获取当前选择状态
const selectionState = editorState.getSelection();

// 获取起始块键
const startKey = selectionState.getStartKey();

// 获取起始偏移量
const startOffset = selectionState.getStartOffset();

// 获取结束块键
const endKey = selectionState.getEndKey();

// 获取结束偏移量
const endOffset = selectionState.getEndOffset();

判断选择状态

// 判断是否为反向选择
const isBackward = selectionState.getIsBackward();

// 判断是否为光标状态(无选择)
const isCollapsed = selectionState.isCollapsed();

// 判断编辑器是否获得焦点
const hasFocus = selectionState.getHasFocus();

实用方法

// 检查选择边界是否在指定范围内
const hasEdge = selectionState.hasEdgeWithin(blockKey, start, end);

// 序列化选择状态(调试用)
const serialized = selectionState.serialize();

实际应用场景

处理用户选择文本

function getSelectedText(editorState) {
  const selection = editorState.getSelection();
  const content = editorState.getCurrentContent();
  
  // 单块选择
  if (selection.isCollapsed()) {
    return '';
  }
  
  const startKey = selection.getStartKey();
  const endKey = selection.getEndKey();
  
  // 跨块选择
  if (startKey !== endKey) {
    // 需要处理多块选择逻辑
    return getMultiBlockSelectionText(content, selection);
  }
  
  // 单块内选择
  const block = content.getBlockForKey(startKey);
  return block.getText().slice(
    selection.getStartOffset(),
    selection.getEndOffset()
  );
}

修改选择状态

// 创建新的选择状态
const newSelection = selectionState.merge({
  focusKey: 'new-block-key',
  focusOffset: 5,
  isBackward: false
});

// 更新编辑器状态
const newEditorState = EditorState.acceptSelection(
  editorState,
  newSelection
);