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

Question

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

在此处使用出色的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);
}

但这显然不能正常工作。 如果我在内容结尾处，则说明一切正常。 但是，如果我将光标放在其他任何地方，它仍将从末尾删除。

我现在迷路了，非常感谢您的帮助

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

Answer 1

在分解了Google如何在其Google加用户标记中使用contenteditable div的方法之后，我找到了一个更合理的解决方案。 也许它将帮助其他人。

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

在Google Chrome浏览器中，每个标记都添加了一个空格。 使用了按钮标签。 并且使用仅Chrome的contenteditable =“ plaintext-only”。

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

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

BR标签是我在研究该标签时获得的最大突破。 在添加此代码之前，删除标签和焦点问题存在很多古怪的行为。

在IE中，进行了更有趣的更改。 此处将具有contenteditable false的范围用于标签。 没有空格或BR标签，但文本节点为空。

有了这些，您不必完全复制Google。

重要部分：

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

1. Chrome应该使用按钮标记

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

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

IE在使用跨度的IE7-8中表现更好。 仅从UI的角度来看。 但是，如果您不在乎您的网站是否是IE的旧版本，则输入以及Firefox和Firefox中的行为都是正确的。

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

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

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

对于FireFox：

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