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

【问题标题】：Unable to delete html consistently in contenteditable div无法在 contenteditable div 中一致地删除 html
【发布时间】：2013-07-21 15:52:53
【问题描述】：

主要在 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 的董事会和这里看到过这个讨论，解决方法通常是将非 contenteditable html 包装在 contenteditable <span>、<p>、<span> 中。我所看到的任何东西都没有真正解决我的问题。至少不完全。即使我可以删除 html，也有很多奇怪的行为。

任何人都知道为什么 contenteditable div 会发生这种情况，如果它只是发生在非 contenteditable html 上的事情，是否有解决这些问题的解决方案，或者我是否必须为退格和删除键编写逻辑来检查和删除标签？

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

【问题讨论】：

请注意，<input> 标签不使用也不需要结束斜杠，并且在 HTML 中从来没有。
这能回答你的问题吗？ contenteditable div backspace and deleting text node problems

标签： javascript html firefox

【解决方案1】：

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

总而言之，每个浏览器处理 contenteditable div 的方式各不相同。挖掘 google plus 的发布小部件实现给了我解决此问题所需的灵感。

如果您要在 contenteditable 中呈现不可编辑的 html 元素：

对于 Chrome，使用 <button> 标记。并在可编辑的 div 上使用 chrome only 属性 contenteditable="plaintext-only"。如果您要附加 html，请确保为每个元素添加一个空格。

对于firefox，使用<input> 标签，并将<br> 元素附加到可编辑的div。 div 末尾的 <br> 允许您关注元素，并解决了我在删除时遇到的问题。

【讨论】：