contenteditable div 和删除 html 和/或可编辑 div 内的非内容可编辑内容存在很多问题。
在这里使用优秀的 Tim Down 的答案：如何删除具有属性 contentEditable 的 div 内的 HTML 元素？
使用 Tim 的代码，整个文本节点被删除。我需要它像任何 textarea 一样工作，逐个字符删除并确保 html 元素也可以退格。
我尝试了以下
else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}
但这显然不能正常工作。如果我在内容的末尾，事情会按预期进行。但是，如果我将光标放在其他任何地方，它仍然会从末尾删除。
我在这一点上迷路了，非常感谢任何帮助
在分解了 google 如何在他们的 google plus 用户标记中使用 contenteditable div 之后，我找到了一个更合理的解决方案。也许它会帮助别人。
添加1个标签后，已经可以看到html浏览器与浏览器的很多不同了。
在 Google Chrome 中，每个标签都会添加一个空格。使用按钮标签。并且使用了 chrome-only contenteditable="plaintext-only"。
当我退格 chrome 中的空格时，会附加一个 BR 标记。
在 Firefox 中，BR 标签会立即与第一个标签一起添加。不需要空格。并且使用输入标签而不是按钮标签。
BR 标签是我在挖掘这个时最大的突破。在添加这个之前，删除标签有很多古怪的行为，以及焦点问题。
在 IE 中，进行了更有趣的更改。此处的标签使用 contenteditable 为 false 的跨度。没有空格或 BR 标签，而是一个空的文本节点。
有了所有这些，您不必完全复制谷歌。
重要部分：
如果要呈现 HTML，请执行以下操作...
1.Chrome应该使用button标签
2. Firefox/IE 应该使用输入标签
对于范围/选择，您通常希望将标签等内容视为单个字符。您可以将其构建到您的范围/选择逻辑中，但输入/按钮标签的行为更加一致，并且代码更少。
IE 在使用跨度的 IE7-8 中表现更好。仅从 UI 的角度来看。但是，如果您不在乎您的网站在旧版本的 IE 中是否漂亮，那么输入在 IE 和 firefox 中具有正确的行为。
3. 仅限 Chrome，在可编辑的 div 上使用 contenteditable="plaintext-only" 属性。
否则，不仅在用户尝试粘贴富文本时会发生很多奇怪的问题，而且在删除 html 元素时有时样式会转移到 div 中，我注意到很多奇怪的问题。
4.如果需要将插入符号位置设置到div的末尾，请将范围的末尾设置在BR之前。
对于火狐：
range.setEndBefore($(el).find('br')[0]);