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

【问题标题】：Why does contenteditable caret with tags go behind each tag in Microsoft Edge?为什么带有标签的 contenteditable 插入符号位于 Microsoft Edge 中的每个标签后面？
【发布时间】：2017-12-08 14:26:21
【问题描述】：

我正在为 angular2+ 创建一个 contenteditable 组件，它应该可以在任何地方进行编辑。在任何地方，我的意思是在标签的开头，在标签和标签的结尾之间（不在实际的标签文本内）。这是从 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 打开它。

【问题讨论】：

我创建了一个demo，它显示了 Edge 中的错误 (v44)

标签： javascript html css microsoft-edge contenteditable

【解决方案1】：

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

<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>

【讨论】：