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

内容可编辑div和删除可编辑div中的html和/或非内容可编辑内容有很多问题

使用下面优秀的Tim的答案：

使用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 contenteditable=“纯文本”

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

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

BR标签是我在挖掘过程中取得的最大突破。在添加此项之前，删除标记时有很多奇怪的行为，以及焦点问题

在IE中，进行了更有趣的更改。此处的标记使用带有contenteditable false的范围。没有空格或BR标记，但有一个空文本节点

有了这些，你不必完全照搬谷歌

重要部分：

如果要呈现HTML，请执行以下操作

1。Chrome应使用按钮标签

2。Firefox/IE应该使用输入标签

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

IE在使用span的IE7-8中表现更好。只是从用户界面的角度来看。但是如果你不在乎你的站点在IE的旧版本中是否漂亮，那么输入在IE和firefox中都有正确的行为

3。仅限Chrome，在可编辑分区上使用contenteditable=“plaintext only”属性。

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

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

对于FireFox：

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

---

我也有同样的问题，我在这里找到了解决办法