Javascript Contenteditable防止插入符号放置在某个元素之后

我有一个特定的contenteditable div，在这个div中，我有一些标签，后面紧跟着标签，所以它是这样的

<span class="formatting-holder"></span>
|<b></b>|
<span class="formatting-holder-close"></span>

||

|字符表示需要防止插入符号定位的位置，插入符号只能放置在

内部，而不能放置在

和

之间

有办法做到这一点吗？

使用CSS 实现您所追求的目标的最佳方法之一是使用CSS，它可以显示您的“|”字符，并防止插入符号位于字符上

<span class="formatting-holder"></span>
<b></b>
<span class="formatting-holder-close"></span>

---

用

代替它的祖父母是不现实的？或者将

font-weight:bold

添加到父级

的样式中，这样您甚至不需要

？不幸的是，没有，因为我有一些粗体文本和一些非粗体文本（可能是其他格式），我需要在粗体周围有一些包装跨距，但是在这个跨距中，不存在任何非粗体文本。如果您宁愿使用CSS伪元素

：before

和

：after

添加那些“|”呢？它们是不可编辑的，无论如何都会显示。哦，显然你没有完全理解我的意思，我想“阻止”插入符号，那些“|”字符只是在解释

.formatting-holder:before,
.formatting-holder:after {
    content: "|";
}