Html contenteditable div退格和删除文本节点问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17890568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
contenteditable div backspace and deleting text node problems
提问by mstef
There are so many issues with contenteditable divs and deleting html and/or non content editable content inside editable divs.
contenteditable div 和删除可编辑 div 中的 html 和/或非内容可编辑内容存在很多问题。
Using an answer by the excellent Tim Down here: How to delete an HTML element inside a div with attribute contentEditable?
在这里使用优秀的 Tim Down 的答案：如何删除具有 contentEditable 属性的 div 内的 HTML 元素？
Using Tim's code, the entire text node gets deleted. I need this to work like any textarea would, deleting character by character and just making sure html elements can be backspaced as well.
使用 Tim 的代码，整个文本节点被删除。我需要它像任何 textarea 一样工作，逐个删除字符并确保 html 元素也可以退格。
I tried the following
我尝试了以下
else if(node){
var index = node.length-1;
if(index >= 0)
node.deleteData(index,1);
else
this.removeChild(node);
}
But this is obviously not going to work correctly. If I am at the end of the content, things work as expected. But if I place the cursor anywhere else, it's still deleting from the end.
但这显然不会正常工作。如果我在内容的末尾，事情会按预期进行。但是如果我将光标放在其他任何地方，它仍然是从末尾删除。
I'm lost at this point, any help is very appreciated
我在这一点上迷路了，非常感谢任何帮助
回答by mstef
After breaking down how google uses contenteditable divs in their google plus user tagging, I landed on a much more reasonable solution. Maybe it will help someone else out.
在分解了 google 如何在他们的 google plus 用户标记中使用 contenteditable div 之后，我找到了一个更合理的解决方案。也许它会帮助别人。
After adding 1 tag, you can already see a lot of differences in the html browser to browser.
添加 1 个标签后，您已经可以看到 html 浏览器与浏览器之间的很多差异。
In Google Chrome, a space is added with each tag. The button tag is used. And the chrome-only contenteditable="plaintext-only" is used.
在 Google Chrome 中，每个标签都会添加一个空格。使用按钮标签。并且仅使用 chrome contenteditable="plaintext-only"。
When I backspace the space in chrome, a BR tag is then appended.
当我在 chrome 中退格空格时，会附加一个 BR 标签。
In Firefox the BR tag is added immediately with the first tag. No spaces are needed. And an input tag is used instead of the button tag.
在 Firefox 中，BR 标签会立即与第一个标签一起添加。不需要空格。并且使用输入标签代替按钮标签。
The BR tag was the single greatest break-through I had while digging through this. Before adding this, there was a lot of quirky behavior with deleting tags, as well as focus issues.
BR 标签是我在挖掘这个过程中最大的突破。在添加这个之前，删除标签有很多古怪的行为，以及焦点问题。
In IE, more interesting changes were made. A span with contenteditable false is used for the tags here. No spaces or BR tags, but an empty text node.
在 IE 中，进行了更有趣的更改。带有 contenteditable false 的跨度用于此处的标签。没有空格或 BR 标签，而是一个空的文本节点。
With all of that, you don't have to copy google exactly.
有了所有这些，您不必完全复制谷歌。
The important parts:
重要部分：
If you're rendering HTML, do the following...
如果您要呈现 HTML，请执行以下操作...
1. Chrome should use the button tag
1. Chrome 应该使用按钮标签
2. Firefox/IE should use the input tag
2. Firefox/IE 应该使用 input 标签
For range/selection you generally want to treat things like tags as a single character. You can build this into your range/selection logic, but the behavior of the input/button tags is much more consistent, and way less code.
对于范围/选择，您通常希望将标签之类的内容视为单个字符。您可以将其构建到范围/选择逻辑中，但输入/按钮标签的行为更加一致，并且代码更少。
IE behaves better in IE7-8 using a span. Just from a UI standpoint. But if you don't care if your site is pretty in old versions of IE, the input has the correct behaviour in IE as well as firefox.
IE 在使用跨度的 IE7-8 中表现更好。仅从用户界面的角度来看。但是如果你不在乎你的网站在旧版本的 IE 中是否漂亮，那么输入在 IE 和 firefox 中都有正确的行为。
3. Chrome only, use the contenteditable="plaintext-only" attribute on your editable div.
3. 仅限 Chrome，在可编辑 div 上使用 contenteditable="plaintext-only" 属性。
Otherwise, a lot of weird issues happen not only when a user tries to paste rich-text, but also when deleting html elements sometimes the styles can get transferred to the div, I noted many strange issues with this.
否则，不仅在用户尝试粘贴富文本时会发生许多奇怪的问题，而且在删除 html 元素时有时也会将样式转移到 div，我注意到了许多奇怪的问题。
4. If you need to set the caret position to the end of the div, set the end of the range before the BR.
4.如果需要设置插入符位置到div的末尾，设置BR之前的范围的末尾。
for FireFox:
对于火狐：
range.setEndBefore($(el).find('br')[0]);
