React实现选中文本超链接功能时Range对象丢失的修复方法

问题根因 #

document.execCommand执行backColor修改选中文本背景色时，会拆分、重构选区所在的DOM节点结构，你提前存储的原生Range对象是绑定在旧DOM树的引用，DOM结构变更后Range记录的起止锚点会指向不存在的旧节点，直接导致Range失效，哪怕存在ref中也只是保留了无效引用，无法用于后续选区恢复。

修复方案 #

核心思路是不要直接存储原生Range实例，改为存储可用于重建Range的定位信息，需要执行加链接操作时，基于存储的信息重新生成有效的Range对象，再执行后续命令。

具体修复步骤 #

• 点击超链接按钮触发选区高亮时，不直接存储Range对象，而是记录Range的起止容器、对应偏移量
• 待用户输入完链接地址需要加超链接时，使用之前存储的定位信息新建一个Range实例，替换掉失效的旧Range
• 新Range挂载到Selection上之后，再执行清除背景色、创建链接的命令

修正后代码 #

点击超链接按钮的逻辑

const selObj = window.getSelection();
if (!selObj.rangeCount) return;
const oRange = selObj.getRangeAt(0);

// 存储选区定位信息，而非Range实例本身
rangeObjectReference.current = {
  startContainer: oRange.startContainer,
  startOffset: oRange.startOffset,
  endContainer: oRange.endContainer,
  endOffset: oRange.endOffset
};

if(isLinked) {
  document.execCommand("unlink", false, false);
  dispatch(formatBlock(blockId));
  toggleLinked();
} else {
  document.execCommand("backColor", true, '#ece6ff');
  setBlockActive();
  setLinkEnter(true);
}

追加链接逻辑

function appendLink() {
  if(activeLink == '' && isLinked) {
    document.execCommand("unlink", false, false);
    dispatch(formatBlock(blockId));
    toggleLinked(false);
    return 
  } 
  
  const savedRangeInfo = rangeObjectReference.current;
  if (!savedRangeInfo) return;

  // 基于存储的信息新建有效Range
  const validRange = document.createRange();
  validRange.setStart(savedRangeInfo.startContainer, savedRangeInfo.startOffset);
  validRange.setEnd(savedRangeInfo.endContainer, savedRangeInfo.endOffset);

  const sel = window.getSelection();
  sel.removeAllRanges();
  sel.addRange(validRange);
  document.execCommand("backColor", false, 'transparent');
  document.execCommand("CreateLink", false, activeLink);
  dispatch(formatBlock(blockId));
  // 操作完成后清空存储的选区信息
  rangeObjectReference.current = null;
}

兼容补充 #

如果你的编辑器基于React/Vue等框架开发，弹出链接输入框的过程中会触发编辑区DOM重渲染，直接存储DOM节点引用也可能失效，这种场景下需要将定位信息升级为文本路径：

• 存储时计算选区起止点在编辑容器所有文本节点中的索引、对应偏移量
• 恢复选区时遍历编辑容器内的所有文本节点，按存储的索引找到对应节点，再设置Range的起止位置

注意：document.execCommand目前已被W3C标记为废弃API，不同浏览器的实现行为存在差异，长期维护建议替换为Tiptap、Slate等成熟富文本框架，或直接基于Selection/Range API手动实现编辑逻辑。

内容的提问来源于stack exchange，提问作者Aadhit Shanmugam