When I use within a <div contentEditable> a <mark> tag the text is marked as expected.
When I now remove the marked tag with Backspace and start retyping some new characters after deleted the last one inside the content editable there is a <font style="..."><span style="...">new text created.
<div id="editable" contentEditable>
Here is some <mark>text</mark> for testing!
</div>This DOM is created after deleting the word text and replaced it with new text.
<div id="editable" contenteditable="">
Here is some <span style="background-color: rgb(255, 255, 0);">new text</span> for testing!
</div>
How can I make the contentEditable to
when retyping?
I fixed it by calling the below function in the delete event by passing the HTML element to the function.
the calling:
placeCaretAtEnd(HTML_ELEMENT_OF_THE_CONTENT_EDITABLE);
the function:
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);
}
}