JSFiddle - React, Tailwind, and code Playground
HTML
<div id="editable" contenteditable="true">
text text text<br><b>texter <img src="https://developer.cdn.mozilla.net/media/img/mdn-logo-tiny.png"> texter texter<br>textz </b>textz textz<br>
</div>
<button id="button" onclick="setCaret()">focus</button>
JavaScript
function setCaret() {
var el = document.getElementById("editable");
recurseDOM(el);
el.focus();
}
function recurseDOM(el) {
var nIndex = 0;
var elNode = el.childNodes[nIndex];
while(elNode) {
var tag =elNode.tagName;
if(tag) {
if(tag.toUpperCase()=='IMG') {
console.log("found IMG");
var range = document.createRange();
range.selectNode(elNode);
window.lastIMG = elNode;
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.execCommand('removeFormat', false, null);
}
else if(elNode.childElementCount) {
recurseDOM(elNode);
}
}
nIndex++;
elNode = el.childNodes[nIndex];
console.log(nIndex);
}
}