Tengo un problema con mi editor WYSIWYG personalizado.
document.getElementById('bold').addEventListener('click', () => edit('STRONG')); document.getElementById('italic').addEventListener('click', () => edit('EM')); function edit(format) { const parentElementOfSelectedText = document.getSelection().getRangeAt(0).commonAncestorContainer.parentElement; // If element is already formatted, undo the format if (parentElementOfSelectedText.tagName === format) { let grandParentOfSelectedText = parentElementOfSelectedText.parentElement; if (parentElementOfSelectedText.textContent) { const selectedText = document.createTextNode(parentElementOfSelectedText.textContent); grandParentOfSelectedText.insertBefore(selectedText, parentElementOfSelectedText); grandParentOfSelectedText.removeChild(parentElementOfSelectedText); grandParentOfSelectedText.normalize(); } } else { const selectedText = document.getSelection().getRangeAt(0); const node = document.createElement(format); const fragment = selectedText.extractContents(); if (fragment) { node.appendChild(fragment); } selectedText.insertNode(node); } } <button id="bold">B</button> <button id="italic">I</button> <p>Lorem ipsum</p>Seleccione un texto y haga clic en un botón. El texto será formateado. Anule la selección del mismo texto y vuelva a seleccionarlo. Ahora haga clic nuevamente en el mismo botón para eliminar el formato.
Seleccione un texto y haga clic en un botón. El texto será formateado. Ahora haga clic nuevamente en el mismo botón para eliminar el formato.
Supongo que probablemente no funcione, porque estoy insertando un elemento dentro del elemento principal. Entonces, en este momento, este elemento no está seleccionado. Con selectedText?.selectNode(node) he intentado seleccionar el nodo correcto pero esto no cambia nada.
Entonces, ¿cómo puedo eliminar el formato cuando el texto permanece seleccionado?