contenteditable div backspace并删除文本节点问题 [英] contenteditable div backspace and deleting text node problems

问题描述

在这里使用优秀的Tim Down的答案：在可编辑divs中删除html和/或非内容可编辑内容。 如何删除一个HTML元素div的属性contentEditable？

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

我试过以下内容：

  else if（node）{
 var index = node.length-1; 
 if（index> = 0）
 node.deleteData（index，1）; 
 else 
 this.removeChild（node）; 
} 
  

但这显然不会正常工作。如果我处于内容的末尾，事情就会按预期工作。但是如果我把光标放在其他地方，它仍然会从结尾删除。

我现在迷失了，任何帮助都非常值得赞赏。
$ b

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

解决方案

在分析谷歌如何在谷歌加用户标签中使用contenteditable divs之后，我登上了更多合理解决。也许它会帮助别人。

添加1个标签后，您已经可以在浏览器中看到很多HTML浏览器的不同。

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

当我退后一步浏览Chrome中的空间时，会添加一个BR标签。

Firefox BR标签会立即添加第一个标签。不需要空间。并且使用输入标签而不是按钮标签。

BR标签是我在挖掘这个过程中遇到的最大突破。添加之前，有很多古怪的行为，包括删除标签以及焦点问题。

所有这些，你都不需要精确地复制google。

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

1。 Chrome应该使用按钮标记

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

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

em> IE在IE7-8中使用跨度表现更好。仅从用户界面的角度来看。但是如果你不关心你的网站是否适合旧版本的IE，那么输入在IE和firefox中都有正确的行为。

第3。仅适用于Chrome，请在可编辑div上使用contenteditable =纯文本属性。 b
$ b

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

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

对于FireFox：

  range.setEndBefore（$（el）.find（'br'）[0]）; 
  

There are so many issues with contenteditable divs and deleting html and/or non content editable content inside editable divs.

Using an answer by the excellent Tim Down here: How to delete an HTML element inside a div with attribute contentEditable?

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.

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

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

解决方案

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.

After adding 1 tag, you can already see a lot of differences in the html browser to browser.

In Google Chrome, a space is added with each tag. The button tag is used. And the chrome-only contenteditable="plaintext-only" is used.

When I backspace the space in chrome, a BR tag is then appended.

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.

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.

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.

With all of that, you don't have to copy google exactly.

The important parts:

If you're rendering HTML, do the following...

1. Chrome should use the button tag

2. Firefox/IE should use the input tag

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.

3. Chrome only, use the contenteditable="plaintext-only" attribute on your editable div.

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.

4. If you need to set the caret position to the end of the div, set the end of the range before the BR.

for FireFox:

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

这篇关于contenteditable div backspace并删除文本节点问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！