Estoy tratando de crear un editor WYSISYG y tengo la opción de proporcionar hipervínculos a una selección de texto. He estado navegando por Internet, pero no puedo averiguar por qué esto no funciona, suspiro.
Según tengo entendido, una vez que hacen clic en el botón del hipervínculo, cambiamos el color de fondo de la selección al color de selección, luego, una vez que ingresan al enlace, hacemos un hipervínculo y volvemos al color de fondo.
Aquí está mi código para ello:
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); }Una vez que ingresan al hipervínculo, estoy realizando esto:
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)); } }Pero cuando cambio el color de fondo de la selección, el objeto de rango se pierde. y no puedo usarlo para realizar el hipervínculo. He intentado almacenarlo y reutilizar la variable pero no funciona. ¿Cuál es el método correcto para arreglar esto?
Gracias por adelantado :)
Me di cuenta de que el color de fondo da una etiqueta de intervalo en su selección. Todo lo que tenía que hacer era crear un objeto de rango basado en el nuevo nodo de texto de intervalo. Rastreé el nodo de texto con esta función:
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} }