ekad, вот вариант с курсором...
Но это вовсе упрощенно.
Вот почитай что пишут про позиционирование в таких редактируемых блоках
https://askdev.ru/q/kak-ustanovit-po...ent-div-13745/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--
<script src="https://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
-->
<style>
#box {
border: 1px solid;
padding: 10px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', _ => {
const o = document.getElementById('box');
o.onclick = function() {
const d = document.createElement('div')
const b = document.createElement('br')
const img = new Image();
img.src ='https://ru.wikipedia.org/static/images/project-logos/ruwiki.png';
img.className = "image";
o.appendChild(img);
d.appendChild(b);
o.appendChild(d);
const range = document.createRange()
const sel = window.getSelection()
range.setStart(o.childNodes[1], 0)
range.collapse(true)
sel.removeAllRanges()
sel.addRange(range)
}
})
function bold() {
}
</script>
</head>
<body>
<div onclick="bold();">жирный фрифт</div>
<div contenteditable="true" style="height:200px;width:200px;" id="box"></div>
</body>
</html>