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

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

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

Answer 1

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

总而言之，每个浏览器处理 contenteditable div 的方式差异很大。深入研究 google plus 的发布小部件的实现给了我解决这个问题所需的灵感。

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

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

对于 firefox，请使用 <input>标记，并附加 <br>元素可编辑 div 。 <br> div 末尾允许您在元素之后聚焦，并解决了我在删除时遇到的问题。