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

Question

有关contenteditable div的问题太多，并且在可编辑的div中删除了html和/或非内容的可编辑内容。

在这里使用优秀的Tim Down的答案：How to delete an HTML element inside a div with attribute contentEditable?

使用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

在分解谷歌在谷歌加用户标签中使用contenteditable divs之后，我找到了一个更合理的解决方案。也许它会帮助其他人。

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

在Google Chrome中，每个标记都会添加一个空格。使用按钮标签。并且仅使用chrome-only contenteditable =“仅纯文本”。

当我对chrome中的空格进行退格时，会附加一个BR标记。

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

BR标签是我在挖掘这个时最大的突破。在添加之前，删除标签以及焦点问题有很多奇怪的行为。

在IE中，进行了更有趣的更改。这里的标签使用带有contenteditable false的span。没有空格或BR标签，但是空文本节点。

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

重要部分：

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

<强> 1。 Chrome应使用按钮标记

<强> 2。 Firefox / IE应使用输入标记

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

使用跨度IE在IE7-8中表现更好。仅从UI的角度来看。但是，如果您不关心您的网站是否在IE的旧版本中相当，那么输入在IE和Firefox中都具有正确的行为。

第3。仅限Chrome，在您的可编辑div上使用contenteditable =“仅纯文本”属性。

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

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

for FireFox：

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