内容可编辑，可防止在某些元素后插入符号

Question

I have a certain contenteditable div, inside this div I have some tags that are immediately followed by tags so it will be like this

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

The | character denote the places where I need to prevent the caret from being positioned, the caret should only be placed inside the <b></b> but not between the <span> and the <b> .

Is there a way to do this?

Answer 1

Use CSS

One of the best ways to accomplish what you're after is by using CSS which displays your "|" characters and also prevents caret from being positioned on them

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

and in your CSS define this

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