第一段引用上面的摘要：
本文旨在解决 React 应用中为用户选中的文本动态添加超链接的问题。核心思路是在用户选中文本后，通过 window.getSelection() 获取选区，并利用 document.execCommand() 实现超链接的插入。重点在于正确处理选区范围，避免在修改文本样式后丢失选区信息。文章将提供详细的代码示例，并解释如何维护选区范围，确保超链接功能的顺利实现。
在构建富文本编辑器或类似应用时，为选中文本添加超链接是一个常见需求。然而，在 React 中实现这一功能可能会遇到一些挑战，尤其是在处理选区范围和 document.execCommand() 的使用上。以下是一种可靠的实现方法，并详细解释了每个步骤。
获取和维护选区范围
首先，我们需要获取用户选中的文本范围。这可以通过 window.getSelection() 方法实现。
const selObj = window.getSelection(); const oRange = selObj.getRangeAt(0);
selObj 代表用户选择的文本，oRange 则包含了选区的起始和结束位置等信息。 关键在于，后续对文本进行操作（例如修改背景色）可能会导致选区范围失效。因此，我们需要一种方法来维护或重新获取选区范围。
修改文本样式
在添加超链接之前，你可能需要先修改选中文本的样式，例如改变背景色，以提示用户当前文本已被选中并即将添加链接。
document.execCommand("backColor", true, '#ece6ff');重要提示： document.execCommand("backColor", ...) 会在选中文本周围插入 标签。 这会改变 DOM 结构，导致之前获取的 oRange 失效。
重新获取选区范围
由于修改样式后 DOM 结构发生变化，我们需要重新定位选区。一种方法是找到由 backColor 命令创建的 标签，并基于该标签重新创建选区范围。
主要增加论坛整合，在后台内置网银，快钱支付宝等实时在线支付平台 支付宝支付方式改成在收银台统一支付 并且修改了收到已付款定单后台显示定单确认功能[这功能非常强大，自动确认] 并且增加了商城内短信功能，商城店主可以自由与会员之间实时交谈。 改正给ID添加积分后，登陆到前台，在 MEMBER LOGIN 下面的积分仍然显示为0的问题 修改 订单确认 中 投递&包装方法 没有根据前面的选择而改
export const returnTextNode = (blockId) => {
var hasNode = false;
var selectedNode = document.getElementById(blockId).childNodes;
for(var i = 0; i < selectedNode.length; i++) {
if(selectedNode[i].nodeName == 'SPAN') {
selectedNode = selectedNode[i];
hasNode = true;
break;
} else if(selectedNode[i].nodeName == 'A') {
var node = selectedNode[i];
var styleAttribute = node.getAttribute("style");
if(styleAttribute?.startsWith('background-color')) {
selectedNode = selectedNode[i];
hasNode = true;
}
else {
var childSpanNode = selectedNode[i].children[0];
if(childSpanNode) {
selectedNode = childSpanNode
hasNode = true;
break
}
}
}
}
return {selectedNode,hasNode}
}这个函数遍历指定 blockId 的元素（通常是一个段落或容器）的子节点，查找由 backColor 或 CreateLink 命令创建的 或 标签。 找到后，它返回该节点的引用。
插入超链接
现在我们有了正确的选区范围，可以插入超链接了。
function appendLink(activeLink, rangeObjectReference, blockId) {
if(activeLink == '') {
document.execCommand("unlink", false, false);
return
} else {
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(rangeObjectReference.current);
document.execCommand("backColor",false,'transparent');
document.execCommand("CreateLink", false, activeLink);
}
}首先，清除当前选区 (sel.removeAllRanges())，然后使用之前保存的或重新获取的 rangeObjectReference.current 添加选区 (sel.addRange(rangeObjectReference.current))。 最后，使用 document.execCommand("CreateLink", false, activeLink) 插入超链接，activeLink 是用户输入的 URL。
清理工作
完成超链接插入后，可以执行一些清理工作，例如移除背景色或更新应用状态。
document.execCommand("backColor",false,'transparent'); //移除背景色完整示例
以下是一个简化的完整示例，展示了如何在 React 中实现超链接功能：
import React, { useState, useRef } from 'react';
function MyEditor() {
const [text, setText] = useState('这是一个示例文本。');
const [linkUrl, setLinkUrl] = useState('');
const editorRef = useRef(null);
const rangeRef = useRef(null);
const handleLink = () => {
const selObj = window.getSelection();
if (!selObj.rangeCount) return; // 没有选区
const oRange = selObj.getRangeAt(0);
rangeRef.current = oRange;
const url = prompt('请输入链接地址：', '');
if (url) {
setLinkUrl(url);
document.execCommand('backColor', false, 'yellow');
// 延迟执行，等待 backColor 生效
setTimeout(() => {
selObj.removeAllRanges();
selObj.addRange(rangeRef.current);
document.execCommand('createLink', false, url);
document.execCommand('backColor', false, 'transparent'); // 移除背景色
setLinkUrl('');
}, 0);
}
};
return (
{text}
);
}
export default MyEditor;注意事项：
- 上述代码使用了 setTimeout 来延迟执行 createLink 命令。这是因为 backColor 命令可能会异步更新 DOM。 延迟执行可以确保在 createLink 执行时，DOM 已经更新完毕。
- contentEditable="true" 属性使得 div 元素可编辑。
- prompt 函数用于获取用户输入的 URL。 在实际应用中，可以使用更友好的 UI 组件。
- rangeRef 用于保存选区信息，在修改样式后重新应用。
- 错误处理：需要添加适当的错误处理机制，例如当用户未选择任何文本时，禁用“添加链接”按钮。
- 跨浏览器兼容性：document.execCommand 在不同浏览器中的行为可能存在差异，需要进行兼容性测试。
总结
为 React 应用中的选中文本添加超链接需要仔细处理选区范围和 DOM 操作。通过获取和维护选区范围，以及在修改样式后重新定位选区，可以确保超链接功能的正确实现。 重要的是理解 document.execCommand 的工作方式以及它如何影响 DOM 结构。 根据实际需求，可以对上述方法进行调整和优化。 记住进行充分的测试，以确保在各种情况下都能正常工作。
