Javascript 防止在contenteditable中的html中插入文本

我有一个带有contenteditable的div，其中有一个链接：

<div contenteditable>
  <a id="a">[$special.value$]</a>
</div>

正常
[$special.value$]
与zwnj
[$special.value$]&zwnj；

在

中创建另一个元素（例如

），并将其

内容可编辑设置为
true
。然后将
设置为向左浮动，将
设置为显示为块元素


div.container{
边框：1px实心#aaa；
}
a{
浮动：左；
颜色：红色；
}
span[内容可编辑]{
显示：块；
宽度：100%；
}
您是否考虑过在
contenteditable
获得焦点时临时删除
a
元素，然后在失去焦点时将其预挂起


let old=”“；
document.querySelector（“div[contenteditable]”）。addEventListener（“focus”，function（）{
old=this.innerHTML；//存储当前数据
this.innerHTML=“；//清除元素
});
document.querySelector（“div[contenteditable]”）。addEventListener（“blur”，function（）{
//将新内容设置为与当前内容连接的旧内容
this.innerHTML=old+this.textContent；
});
div[内容可编辑]{
边框：1px实心#aaa；
}
a{color:red；}

[$special.value$]
…在键入后点击[TAB]或点击元素外部…
当元素没有链接到任何地方时，为什么要将元素包装在
标记中？它甚至可能是
或其他html，问题是在itI中添加了新文本。我没有注意到光标有任何奇怪之处。
<div contenteditable>
  <a id="a">[$special.value$] new text added here</a> instead of here
</div>