主要在 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 发生的情况,是否有解决方案可以解决这些问题,或者我是否必须为退格键和删除键编写逻辑来检查和删除删除标签?
最佳答案
我在这里详细回答了这个问题: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 末尾允许您在元素之后聚焦,并解决了我在删除时遇到的问题。
关于javascript - 无法在 contenteditable div 中一致删除 html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17795601/