无法在contenteditable div中一致地删除html

Question

主要在Firefox中，虽然它偶尔会在其他浏览器中中断。如果你检查下面的jsfiddle，特别是如果你转到最后一个标签并尝试全部删除它们，你就不能。有时你可以。这不一致。

 <div id="testDiv" contentEditable="true">
      Hey <input id="user-tag-1" class="ut ut-full-name" carpos="9" type="button" tabindex="-1" value="Rob"/>
 </div>

我已经在Mozilla的董事会以及此处看到了这一点，解决方法通常是将非满足的html包含在可信的<span>，<p>，<span>中。我所看到的一切都没有为我解决问题。至少不完全。即使我可以删除html，也会有很多奇怪的行为。

任何人都知道为什么会出现这种可疑的div，如果它只是在非满足的html中发生的事情，是否有解决这些问题的解决方案，或者我必须为退格编写逻辑并删除要检查的密钥和删除标签？

http://jsfiddle.net/mstefanko/qDkYq/

Answer 1

我在这里详细解答了这个问题：https://stackoverflow.com/a/18069930/352335

总结一下，每个浏览器处理可信任div的方式差异很大。通过谷歌加上他们的发布小部件的实现，这给了我解决这个问题所需的灵感。

如果你要在一个满足的内容中呈现不可编辑的html元素：

对于chrome，请使用按钮标记。并使用chrome only属性contenteditable =＆＃34;仅限纯文本＆＃34;在可编辑的div上。如果您要附加html，请确保为每个元素添加空格。

对于firefox，请使用输入标记，并将BR标记附加到可编辑的div。 div末尾的BR标签允许您关注元素，并修复了删除时遇到的问题。