if you place another html block with the contenteditable="false" attribute in the contenteditable block, then the cursor moves outside the block as shown in the screenshot.

Try to start removing the word "remove" in the example. And the cursor will go beyond the block. Is it possible to solve this problem?

http://jsfiddle.net/weckdjp4/

.test-block {
  display: inline-block;
  height: 30px;
  border: 1px solid red;
  padding: 2px;
}

.content {
  width: 80%;
  border: 1px solid #CCC;
  padding: 10px;
}

<div class="content" contenteditable="true" id="test">hi <div class="test-block" contenteditable="false">test</div>remove</div>