React 中为文本选择添加超链接的实现方法-html教程-PHP中文网

React 中为文本选择添加超链接的实现方法

花韻仙語

发布： 2025-08-17 17:34:00

原创

528人浏览过

react 中为文本选择添加超链接的实现方法

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 的子节点，查找 标签。如果找到，则将该 标签作为新的文本节点。如果存在超链接标签<a>，则判断其是否存在背景颜色，如果存在则选中该节点，否则选中超链接标签内部的标签。

注意事项：