第一段引用上面的摘要：
本文介绍了在 React WYSIWYG 编辑器中为选定文本添加超链接的正确方法。核心思路是，在添加背景色后，由于会生成 span 标签，需要基于新的 span 文本节点重新创建 range 对象，并提供了一个辅助函数来查找这个文本节点。通过这种方式，可以解决 range 对象丢失的问题，并成功为选定文本添加超链接。
在构建富文本编辑器时，为用户提供超链接功能是一项常见的需求。本文将探讨如何在 React 应用中，针对用户选定的文本添加超链接。遇到的一个常见问题是，当尝试使用 document.execCommand 修改选定文本的背景颜色时，之前保存的 range 对象可能会失效，导致后续无法正确插入链接。下面将介绍一种解决此问题的方法。
理解问题
使用 document.execCommand("backColor", true, '#ece6ff') 为选定文本添加背景色时，浏览器实际上会在选定文本周围插入一个 <span> 标签。这导致之前通过 window.getSelection().getRangeAt(0) 获取的 range 对象不再指向原始的文本节点，而是指向了包含文本的 <span> 元素。因此，我们需要找到新的文本节点，并基于它重新创建 range 对象。
解决方案
核心思路是，在设置背景颜色后，查找新生成的 <span> 标签，并基于这个 <span> 标签内部的文本节点重新创建 range 对象。以下是一个示例函数，用于查找包含背景色的 <span> 标签或 <a> 标签内的 <span> 标签：
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}
}代码解释：
- returnTextNode(blockId): 该函数接受一个 blockId 作为参数，用于定位包含选定文本的元素。
- document.getElementById(blockId).childNodes: 获取指定元素的所有子节点。
- 循环遍历子节点: 遍历所有子节点，查找符合条件的节点。
- if(selectedNode[i].nodeName == 'SPAN'): 检查当前节点是否为 <span> 标签。如果是，则将 selectedNode 更新为该节点，并设置 hasNode 为 true。
- else if(selectedNode[i].nodeName == 'A'): 检查当前节点是否为 <a> 标签，并且其style属性以background-color开头，如果是，则将 selectedNode 更新为该节点，并设置 hasNode 为 true。
- 查找 <a> 标签内的 <span> 标签: 如果当前节点是 <a> 标签，则尝试查找其子节点中的 <span> 标签。
- 返回结果: 函数返回一个包含 selectedNode (找到的文本节点) 和 hasNode (是否找到节点) 的对象。
使用示例：
假设你在点击超链接按钮后，设置了背景色，并弹出了一个对话框让用户输入链接地址。在用户输入链接地址并确认后，你可以使用以下代码来添加超链接：
function appendLink(blockId, activeLink) {
const { selectedNode, hasNode } = returnTextNode(blockId);
if (hasNode) {
const range = document.createRange();
range.selectNodeContents(selectedNode); // 创建包含 span 内部所有内容的 Range
const sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand("CreateLink", false, activeLink);
} else {
console.warn("No span node found after setting background color.");
}
}代码解释：
- returnTextNode(blockId): 调用上面定义的函数，查找包含背景色的 <span> 标签。
- document.createRange(): 创建一个新的 range 对象。
- range.selectNodeContents(selectedNode): 将 range 对象设置为包含 <span> 标签内的所有内容。
- window.getSelection(): 获取当前的 selection 对象。
- sel.removeAllRanges(): 移除所有已存在的 range 对象。
- sel.addRange(range): 添加新的 range 对象到 selection 中。
- document.execCommand("CreateLink", false, activeLink): 使用 CreateLink 命令创建超链接。
注意事项
- 确保 blockId 参数正确，并且能够定位到包含选定文本的元素。
- 在调用 document.execCommand("CreateLink", ...) 之前，务必确保已经正确设置了 range 对象。
- 如果用户在设置背景色后取消了操作，需要移除添加的 <span> 标签，以避免影响后续的操作。
总结
通过本文介绍的方法，可以有效地解决在 React WYSIWYG 编辑器中，由于设置背景颜色导致 range 对象失效的问题。关键在于，在设置背景颜色后，需要重新查找包含文本的 <span> 标签，并基于这个 <span> 标签内部的文本节点重新创建 range 对象。 这种方法可以确保超链接能够正确地添加到用户选定的文本上，从而提升用户体验。
