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

【问题标题】：contenteditable div backspace and deleting text node problemscontenteditable div 退格和删除文本节点问题
【发布时间】：2013-07-27 06:25:05
【问题描述】：

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

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

我尝试了以下

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

但这显然不能正常工作。如果我在内容的末尾，事情会按预期进行。但是如果我将光标放在其他任何地方，它仍然会从末尾删除。

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

【问题讨论】：

【解决方案1】：

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

添加1个标签后，已经可以看到html浏览器和浏览器的很多区别了。

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

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

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

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

在 IE 中，进行了更有趣的更改。此处的标签使用 contenteditable 为 false 的跨度。没有空格或 BR 标记，而是一个空的文本节点。

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

重要部分：

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

1. Chrome 应该使用按钮标签

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

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

IE 在 IE7-8 中使用 span 表现更好。仅从 UI 的角度来看。但是，如果您不在乎您的网站在旧版本的 IE 中是否漂亮，那么输入在 IE 和 firefox 中具有正确的行为。

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

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

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

对于火狐：

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

【讨论】：