为什么带有标签的contenteditable插入符号位于Microsoft Edge中的每个标记后面？

Question

我正在为angular2 +创建一个可满足的组件，它应该可以在任何地方编辑。我指的是标记开头的任何地方，标记和标记结尾之间（不在实际的标记文本中）。以下是来自API的预加载数据的代码。

<div id="txt" contenteditable="true">
  <span id="annyoing-html" contenteditable="false">
    <span class="badge">I AM ANNOYING</span>
  </span>
  <span id="annyoing-html" contenteditable="false">
    <span class="badge">I AM ANNOYING TOO</span>
  </span>
</div>

完整的演示代码：

https://jsfiddle.net/9kqkbuvr/5/

要了解它应该如何工作，请使用Chrome或Opera打开它。

Answer 1

mmm .... padding不是白色空间......它不应该是可选择的......我不确定哪种解释是正确的。解决方法是在两个不可编辑的跨度之间放置一个空格。

<div id="txt" contenteditable="true">
  <span id="annyoing-html" contenteditable="false">
    <span class="badge">I AM ANNOYING</span>
  </span>&nbsp;
  <span id="annyoing-html" contenteditable="false">
    <span class="badge">I AM ANNOYING TOO</span>
  </span>
</div>