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.
botonPasarANegrita
, que asumo que querías usarbotonNegrita
? 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.