contenteditable div退格和删除文本节点问题

contenteditable div 以及删除可编辑 div 内的 html 和/或非内容可编辑内容存在很多问题。

使用优秀 Tim Down 的回答：如何删除具有 contentEditable 属性的 div 内的 HTML 元素？ https://stackoverflow.com/questions/2177958/how-to-delete-an-html-element-inside-a-div-with-attribute-contenteditable

使用蒂姆的代码，整个文本节点被删除。我需要它像任何文本区域一样工作，逐个字符删除并确保 html 元素也可以退格。

我尝试了以下方法

else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}

但这显然无法正常工作。如果我读完内容，一切都会按预期进行。但如果我将光标放在其他地方，它仍然会从末尾删除。

我现在迷路了，非常感谢任何帮助

http://jsfiddle.net/mstefanko/DvhGd/1/ http://jsfiddle.net/mstefanko/DvhGd/1/

在详细分析了 google 如何在 google plus 用户标记中使用 contenteditable div 后，我找到了一个更合理的解决方案。也许它会帮助别人。

添加1个标签后，您已经可以看到html浏览器与浏览器之间的很多差异。

在 Google Chrome 中，每个标签都会添加一个空格。使用按钮标签。并且使用仅限 chrome 的 contenteditable="plaintext-only" 。

当我在 chrome 中退格空格时，会附加一个 BR 标签。

在 Firefox 中，BR 标签会立即添加到第一个标签中。不需要空格。并且使用输入标签代替按钮标签。

BR 标签是我在深入研究这一问题时取得的最大突破。在添加此功能之前，删除标签以及焦点问题存在很多奇怪的行为。

在IE中，做了更多有趣的改变。这里的标签使用了 contenteditable false 的跨度。没有空格或 BR 标签，而是一个空文本节点。

有了这些，你就不必完全复制谷歌了。

重要部分：

如果您要渲染 HTML，请执行以下操作...

1. Chrome应该使用button标签

2. Firefox/IE应该使用input标签

对于范围/选择，您通常希望将标签之类的东西视为单个字符。您可以将其构建到范围/选择逻辑中，但输入/按钮标签的行为更加一致，并且代码更少。

使用跨度，IE 在 IE7-8 中表现更好。仅从用户界面的角度来看。但是，如果您不关心您的网站在旧版 IE 中是否美观，则输入在 IE 和 Firefox 中具有正确的行为。

3. 仅适用于 Chrome，请在可编辑 div 上使用 contenteditable="plaintext-only" 属性。

否则，不仅当用户尝试粘贴富文本时，而且在删除 html 元素时，有时样式可能会转移到 div 时，会发生很多奇怪的问题，我注意到了许多与此有关的奇怪问题。

4. 如果需要将插入符号位置设置到 div 的末尾，请将范围的末尾设置在 BR 之前。

对于火狐浏览器：

range.setEndBefore($(el).find('br')[0]);