2

主要在 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/

4

1 回答 1

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. <br>div 末尾的 允许您关注元素，并修复了我在删除时遇到的问题。

于 2013-08-06T00:49:13.397 回答