Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

contenteditable div backspace and deleting text node problems

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/

like image 726
mstef Avatar asked Jul 26 '13 20:07

mstef


1 Answers

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 Plus Post Widget

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

Google Chrome Source

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 Chroem Source

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

enter image description here

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.

enter image description here

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]);
like image 80
mstef Avatar answered Oct 27 '22 10:10

mstef