允许在内容结尾处移出范围可编辑

我正在尝试使用 contenteditable . 在这个mcve中,它只有一个功能,即选中的文本被赋予一个红色的突出显示。 ^阿西

我使用的代码如下:

function createSpan() {
    let selection = document.getSelection();
    let range = selection.getRangeAt(0);
    let element = document.createElement("span");
    element.className = "inline-equation";
    range.surroundContents(element);

    let newRange = new Range();
    newRange.selectNodeContents(element);
    selection.removeAllRanges();
    selection.addRange(newRange);
}

$("button").click(createSpan)

.inline-equation {
  background-color: red;
  display: inline-block;
}

#editor {
  width: 100%;
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
Create Span
</button>
<div id="editor" contenteditable="true">
This is a contenteditable area.
</div>

我对用户可能 离开 突出显示区域并继续键入未格式化的文本。要体验此问题:

1. 运行上面的堆栈片段
2. 从中间的某个位置选择文本,直到最后,然后单击 创建跨度
3. 在行尾键入一些新文本

这个新文本也有红色的突出显示,即使您试图移出插入的 span 按右箭头键。

我仍然想给用户附加格式化的新文本的选项,但也允许用户从 跨度 以便他们可以继续键入普通文本。

也就是说, 跨度 应作为可移入或移出的完全独立的可编辑对象。这包括从 跨度 即使它在文档的末尾,用户也可以继续输入非格式化的文本。

我能给出的最好的例子是微软Word的内联公式。请注意,在下面的GIF中,公式是如何作为一个单独的对象使用的,我可以从中导航出来,以便在其右侧键入普通文本。这就是我想要的 跨度 行动起来。

我已经试着换了 跨度 用一个 div 具有 inline-block 格式化以查看这是否影响了行为,但它没有影响。我应该如何实现我正在寻找的效果?

^阿西 在实际的用例中,“highlight”实际上表示乳胶格式的数学,稍后将呈现。我正在编写一个基本上是支持内联乳胶的专有标记语言的编辑器。