contenteditable div と、単純なスパンを追加するボタンがあります。
<button id="insert-span">Insert</button>
<div id="edit-box" contenteditable="true"></div>
<script>
$('#insert-span').on('click', function() {
document.execCommand('insertHTML', null, '<span class="inserted">Hi</span>');
});
</script>
ボタンをクリックすると、スパンがdivに正しく追加されますが、さらにテキストを入力すると、挿入されたスパン内にあるため、このようになります
<div id="edit-box" contenteditable="true">
<span class="inserted">Hi and then all the other text I enter</span>
</div>
このような結果になるように、スパンタグの外側にテキストの入力を開始する方法はありますか
<div id="edit-box" contenteditable="true">
<span class="inserted">Hi</span> and then all the other text I enter
</div>