如何为React中的文本选择提供超链接

Question

我正在尝试构建Wysyyg编辑器，并且可以选择与文本选择的超链接。我一直在搜寻互联网，但我无法找出为什么这不起作用。

我的理解是，一旦他们单击超链接按钮，我们就将选择的背景颜色更改为选择颜色，然后一旦进入链接，我们就会超链接并恢复背景颜色。

这是我的代码：

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);
        }

一旦他们进入超链接，我就会执行此操作：

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));
            
        }
   
    }

但是，当我更改选择的背景颜色时，范围对象就会丢失。而且我无法使用它来表现超级链接。我尝试将其存储并重复使用该变量，但它不起作用。解决此问题的正确方法是什么？

提前致谢 ：）

Answer 1

我意识到背景颜色在您选择中给出了跨度标签。我要做的就是根据新的跨度文本节点创建一个范围对象。我使用此功能跟踪文本节点：

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}
}