React 中为文本选择添加超链接的实现方法
在构建富文本编辑器（WYSIWYG）时，为选中文本添加超链接是一个常见需求。本文将介绍一种在 React 中实现此功能的方法，并重点解决在添加背景颜色后 Range 对象丢失的问题。
首先，我们需要监听用户点击超链接按钮的事件。当用户点击按钮时，我们希望改变选中文本的背景颜色，并提示用户输入链接。
const selObj = window.getSelection(); const oRange = selObj.getRangeAt(0); rangeObjectReference.current = oRange; if(isLinked) { document.execCommand("unlink", false, false); dispatch(formatBlock(blockId)); toggleLinked(); } else { document.execCommand("backColor",true,'#ece6ff'); setBlockActive(); setLinkEnter(true); }
上述代码中，window.getSelection() 用于获取当前选中的文本，oRange 保存了选中文本的 Range 对象。document.execCommand(“backColor”,true,’#ece6ff’) 用于改变选中文本的背景颜色。
接下来，当用户输入链接并确认后，我们需要使用 document.execCommand(“CreateLink”, false, activeLink) 命令创建超链接。
function appendLink() { if(activeLink == '' && isLinked) { document.execCommand("unlink", false, false); dispatch(formatBlock(blockId)); toggleLinked(false); return } else { var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(rangeObjectReference.current); document.execCommand("backColor",false,'transparent'); document.execCommand("CreateLink", false, activeLink); dispatch(formatBlock(blockId)); } }
然而，问题在于，当我们改变选中文本的背景颜色时，浏览器会在选中文本周围插入 标签，这会导致之前保存的 Range 对象失效。因此，我们需要找到一种方法来重新获取选中文本的节点。
一种解决方案是，通过查找插入的 标签来重新创建 Range 对象。以下是一个示例函数，用于查找指定 Block ID 下的文本节点：
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} }
该函数通过遍历指定 Block ID 的子节点，查找 标签。如果找到，则将该 标签作为新的文本节点。如果存在超链接标签，则判断其是否存在背景颜色，如果存在则选中该节点，否则选中超链接标签内部的标签。
注意事项：
- 在实际应用中，需要根据具体的 DOM 结构调整查找文本节点的逻辑。
- document.execCommand 方法在不同浏览器中的行为可能存在差异，需要进行兼容性测试。
- 为了更好的用户体验，可以在输入链接时进行验证，并提供预览功能。
总结：
本文介绍了一种在 React WYSIWYG 编辑器中为选中文本添加超链接的实现方法。通过查找 Span 标签来重新获取文本节点，解决了因改变背景颜色导致 Range 对象丢失的问题。通过合理运用 document.execCommand 和 DOM 操作，可以实现强大的富文本编辑功能。
评论（已关闭）
评论已关闭