1

Según tengo entendido las etiquetas <div> o <p> con atributo ContentEditable no permiten el uso de las propiedades "selectionStart" ni "selectionEnd" que si tiene la etiqueta textarea.

Por lo que para intentar obtener el inicio y fin de una selección me veo obligado a usar las propiedades anchorOffset y focusOffset pertenecientes a window.getSelection().

Y eso no me sirve porque si dentro de la etiqueta "p" hay varios nodos como "b" o "i" ... las propiedades anchorOffset y focusOffset pertenecen a ese nodo y no al parrafo, por lo que no me sirve de nada ya que no identifican concretamente la selección teniendo en cuenta que pueden existir varios nodos iguales como "b"AAA"/b" y "b"AAA"/b" dentro de "p".

Por lo tanto me gustaría saber si hay alguna manera de identificar exactamente la selección. Este es el ejemplo mínimo y completo.

let botonParrafo = document.getElementById("parrafo");
let botonNegrita = document.getElementById("negrita");
let espacioTrabajo = document.getElementById("espacioTrabajo");
var elementoActual;

botonParrafo.addEventListener("click", function(evento){
  let parrafo = document.createElement("p");

  parrafo.addEventListener("focus", function(evento){
    elementoActual = parrafo;
  });

  parrafo.contentEditable = "true";
  espacioTrabajo.appendChild(parrafo);
});

botonNegrita.addEventListener("click", function(evento){
    let seleccion = window.getSelection();
    let texto = seleccion.toString();

    elementoActual.innerHTML.replace(texto, "<b>" + texto + "</b>");
});
<button id="parrafo">AÑADIR PÁRRAFO</button>
<button id="negrita">NEGRITA</button>
<div id="espacioTrabajo"></div>

Muchas gracias de antemano. Y un saludo.

3
  • Buen día, ¿tienes algún código HTML integrado?... sería bueno poder reproducir el problema o que adjuntes un ejemplo mínimo, completo y verificable... Commented el 9 ago. 2023 a las 16:44
  • Ya está el ejemplo completo Commented el 9 ago. 2023 a las 17:44
  • He modificado tu pregunta para añadir el código como snippet y que podamos ejecutarlo directamente en SOes. Como puedes comprobar en la consola, tu código no compila porque te inventas el nombre de la variable botonPasarANegrita, que asumo que querías usar botonNegrita? Si buscas ayuda con la depuración es importante que pases un código CORRECTO (o más bien, que demuestre tu error correctamente!), porque si no el error más grave que veo ahí es que no usas las variables que has declarado.
    – Benito-B
    Commented el 9 ago. 2023 a las 18:29

1 respuesta 1

1

No creo que funcione con replace, porque, que pasa si tienes el texto repetido??? Te va a cambiar el primer texto, que no necesariamente corresponde al que seleccionaste

Prueba la función surroundContents, creo que se adecua más al problema que tienes. Para ello debes obtener el rango usando getRangeAt

Aquí una demo:

botonPasarANegrita.addEventListener("click", function(evento){

    let seleccion = window.getSelection();
    let rango = seleccion.getRangeAt(0);
     
    let b = document.createElement("b");
    b.innerHTML = seleccion.toString();
    rango.surroundContents(b);
});
div{
  border:1px solid;
}
<button id="botonPasarANegrita">Negrita</button>

<div id="elementoActual" contentEditable="true"></div>

1
  • Muchas gracias por las molestias. Precisamente buscaba el ejemplo adecuado sin recurrir a replace, más arriba indiqué que podría darse el caso de que hubiera cadenas idénticas. Commented el 15 ago. 2023 a las 15:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.