Cuando uso dentro de un <div contentEditable> una etiqueta <mark> , el texto se marca como se esperaba.
Ahora, cuando elimino la etiqueta marcada con Backspace y empiezo a volver a escribir algunos caracteres nuevos después de eliminar el último dentro del contenido editable, se crea un <font style="..."><span style="...">new text .
<div id="editable" contentEditable> Here is some <mark>text</mark> for testing! </div>Este DOM se crea después de eliminar el texto de la palabra y reemplazarlo con texto nuevo.
<div id="editable" contenteditable=""> Here is some <span style="background-color: rgb(255, 255, 0);">new text</span> for testing! </div>¿Cómo puedo hacer que el contenido sea Editable para
al volver a escribir?
Lo arreglé llamando a la siguiente función en el evento de eliminación pasando el elemento HTML a la función.
la llamada:
placeCaretAtEnd(HTML_ELEMENT_OF_THE_CONTENT_EDITABLE);la función:
placeCaretAtEnd(el) { el.focus(); if (typeof window.getSelection != "undefined" && typeof document.createRange != "undefined") { var range = document.createRange(); range.selectNodeContents(el); range.collapse(false); var sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } }