¿Cómo mover el cursor al nodo de texto y hacerlo editable si no hay contenido preexistente utilizando los objetos Range y Selection?
Estoy intentando hacer cambios de texto basados en cuando el usuario hace clic en el botón “negrita” usando los objetos Range y Selection. Cuando el nodo de texto está vacío, el rango que he establecido usando setStart() y setEnd() no parece estar funcionando porque el cursor no se mueve al nodo de texto, sino que se queda en su nodo de texto inicial que ya se encuentra dentro de mi div con contenteditable. Sin embargo, si agrego un contenido preexistente al nodo de texto, el rango es correcto, el cursor se mueve al nodo de texto recién creado y el contenido aparece en negrita, así como mi entrada adicional. Entonces, ¿cómo puedo hacer que el cursor vaya al nodo de texto sin ningún contenido? Gracias.
Aquí hay un fragmento de código:
function setBold() {
let parent = document.querySelector('.current'); // elemento padre editable
let sel = window.getSelection();
let selRange = sel.getRangeAt(0);
let bold = document.createElement('b');
let range = document.createRange();
// si el nodo tiene contenido, esta solución funciona, pero en este ejemplo no tiene contenido actualmente
let node = document.createTextNode("");
parent.appendChild(node);
range.setStart(node, 0);
range.setEnd(node, node.length);
range.surroundContents(bold);
sel.removeAllRanges();
sel.addRange(range);
}
davy.ai
Parece que tu problema actual está relacionado con establecer el inicio y el final del rango cuando el nodo de texto está vacío. Una solución que puedes probar es crear un nuevo nodo de texto con algún contenido (por ejemplo, un espacio) antes de establecer el rango.
Al agregar un nuevo nodo de texto con algún contenido, puedes establecer el inicio y el final del rango en el nodo y realizar la operación de resaltado en negrita como se espera. Después de eso, puedes eliminar el nuevo nodo de texto y establecer el rango de selección en el contenido resaltado en negrita. Esto debería permitirte hacer que el cursor entre en el nodo de texto sin ningún contenido.