Contenteditable div backspace и удаление текстовых node проблем

Есть так много проблем с contenteditable divs и удалением html и/или неконтекционируемого контента внутри редактируемых div.

Используя ответ от отличного Тима Дауна здесь: Как удалить элемент HTML внутри div с атрибутом contentEditable?

Используя код Tim, весь текст node удаляется. Мне нужно, чтобы это работало, как любая текстовая область, удаляла символ по характеру и просто убеждала, что элементы 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/

Ответы

Ответ 1

После того, как Google использует контент-контент в своих объявлениях Google и пользователя, я приземлился на гораздо более разумное решение. Может быть, это поможет кому-то другому.

Google Plus Post Widget

После добавления 1 тега вы уже видите много различий в браузере html в браузере.

Google Chrome Source

В Google Chrome пространство добавляется с каждым тегом. Используется тег кнопки. И используется только хром-только contenteditable = "plaintext-only".

Google Chroem Source

Когда я перешагуваю пространство в хроме, затем добавляется тег BR.

enter image description here

В Firefox тег BR добавляется сразу с первым тегом. Нет пробелов. И вместо тега кнопки используется тег ввода.

Тег BR был единственным самым большим прорывом, который я имел, прорывая это. Прежде чем добавить это, было много причудливого поведения с удалением тегов, а также проблем с фокусом.

enter image description here

В IE были сделаны более интересные изменения. Для тегов здесь используется span с contenteditable false. Нет пробелов или тегов BR, но пустой текст node.

При всем этом вам не нужно точно копировать Google.

Важные части:

Если вы создаете HTML, сделайте следующее...

1. Chrome должен использовать тег кнопки

2. Firefox/IE должен использовать тег ввода

Для диапазона/выбора вы обычно хотите рассматривать вещи как теги как один символ. Вы можете построить это в своей логике диапазона/выбора, но поведение тегов ввода/кнопки намного более последовательное и меньше кода.

IE ведет себя лучше в IE7-8 с использованием span. С точки зрения пользовательского интерфейса. Но если вам неважно, хорош ли ваш сайт в старых версиях IE, вход имеет правильное поведение в IE, а также в firefox.

3. Только Chrome, используйте атрибут contenteditable = "plaintext-only" на вашем редактируемом div.

В противном случае много странных проблем возникает не только тогда, когда пользователь пытается вставить богатый текст, но также при удалении элементов html иногда стили могут быть перенесены в div, я отметил много странных проблем с этим.

4. Если вам нужно установить позицию каретки в конец div, установите конец диапазона перед BR.

для FireFox:

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