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

Question

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

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

使用 Tim 的代码，整个文本节点被删除。我需要它像任何文本区域一样工作，逐个字符地删除并确保 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 plus 用户标记中使用 contenteditable div 之后，我找到了一个更合理的解决方案。也许它会帮助其他人。

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

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

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

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

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

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

有了这些，您就不必完全照搬 google 了。

重要部分:

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

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

<强>2。 Firefox/IE 应该使用 input 标签

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

使用 span，IE 在 IE7-8 中表现更好。仅从用户界面的 Angular 来看。但是，如果您不关心您的网站在旧版 IE 中是否漂亮，输入在 IE 和 firefox 中都有正确的行为。

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

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

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

对于火狐:

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