如何利用window.getSelection和Range对象实现网页富文本自定义标记的长尾关键词疑问？

本文共计878个文字，预计阅读时间需要4分钟。

直接调用 `getRangeAt(0)` 前，必须确认当前 `selection` 有有效范围。如果没有，将返回 `undefined` 或抛出错误。常见问题包括用户未选中文本或点击了编辑区域外。

实操建议：

• 先判断 selection.rangeCount > 0，再取范围；否则忽略或提示“请先选中文字”
• 注意 iframe 场景：跨 iframe 时 window.getSelection() 拿到的是父窗口的 selection，需切换到子窗口上下文执行
• React/Vue 等框架中，事件回调里调用要加 setTimeout(..., 0) 或 requestAnimationFrame，避免因虚拟 DOM 更新时机导致 selection 尚未同步

用 Range.surroundContents 包裹选中文本失败的典型原因

surroundContents 要求选区必须完全落在一个文本节点内（不能跨标签、不能包含块级元素），否则抛出 InvalidStateError。这是富文本标记功能中最常卡住的地方。