如何在Draft.js中获取当前光标位置以实现插入链接弹窗智能对齐

针对空行、光标位于编辑器末尾时，window.getSelection().getRangeAt(0).getBoundingClientRect()返回值全为0的问题，可通过以下两种稳定方案解决：

方案1：纯DOM兼容方案 #

• 触发快捷键后先做判断：选区为折叠状态（window.getSelection().isCollapsed === true）且获取到的DOMRect所有属性均为0时，执行后续兼容逻辑
• 向当前光标位置临时插入零宽不换行字符\u200B，该字符无视觉宽度、不会改变原有内容展示效果
• 重新调用getBoundingClientRect()获取准确的光标坐标
• 立即删除刚插入的临时字符，恢复编辑器原有内容状态
• 使用拿到的坐标计算弹窗位置即可

方案2：Draft.js 原生API方案（更推荐，无需修改文档内容） #

• 从当前EditorState中获取选区的SelectionState对象，调用getStartKey()拿到光标所在块的key，调用getStartOffset()拿到光标在块内的偏移量
• 通过编辑器实例的refs拿到编辑器DOM容器，遍历容器内的块节点，通过data-offset-key属性匹配到对应块的DOM元素（Draft.js渲染的块节点data-offset-key属性前缀与块key一致）
• 直接调用该块DOM的getBoundingClientRect()获取坐标，空行场景下块节点自带行高，可拿到正确的上下左右位置参数，直接按块的左对齐+底部偏移量设置弹窗位置即可
• 若需要对齐正常行的光标水平偏移，可叠加块节点的paddingLeft、textIndent属性值计算即可

极端场景兼容：如果编辑器完全为空、没有任何可匹配的块节点，直接取编辑器容器的getBoundingClientRect()的左下角坐标叠加内边距作为定位基准即可。

内容的提问来源于stack exchange，提问作者Jiahua Zhang