Нови редове и contenteditable с вложени нередактируеми тагове

Имам странен случай за contenteditable елемента в HTML. Разполагаме с редактор с форматиран текст, в който клиентите зареждат предварително създадени шаблони (от нас) и след това могат да променят този шаблон, както желаят (най-вече).

Части от нашите шаблони са маркирани да не могат да се редактират директно, но все пак могат да бъдат премахнати и т.н. Изглежда обаче има проблем, когато един такъв елемент е първият елемент на ред (непосредствено след маркер <br/>), а потребителят удари DEL на реда по-горе. Тъй като е contenteditable=false, изглежда, че браузърът изтрива не <br/>, а целия нередактируем диапазон.

Примерният HTML е така

<div contenteditable=true>
    <span>blah blah blah</span><br/>
    <span contenteditable="false">You cant edit this value directly</span>
</div>

Ако потребителят постави курсора си след blah blah blah и удари DEL, цялото следващо редактируемо съдържание се изтрива, а не прекъсването на реда.

Има ли някакъв начин, javascript или друг, да коригирате това поведение?

Заблуждавал съм се с опити за откриване на позицията на курсора (с помощта на rangy) и вмъкване на временни интервали и т.н., но изглежда не мога да го накарам да има желаното поведение, което е просто, че нередактируемият таг се извежда до предишния линия.

Ограничихме използването на редактора само до Chrome, така че няма нужда да се притеснявате за IE или FF.

jsfiddle на пример


person Thomas Jones    schedule 12.07.2012    source източник
comment
<br/> част ли е от вашия шаблон? Ако е така, не можете ли просто да използвате 3 div вместо да използвате <br/>?   -  person Lea Hayes    schedule 26.07.2012
comment
да По причини, за които не съм напълно сигурен (вероятно за изобразяване), сме заменили натискането на клавиш enter, за да вмъкнем нов ред, вместо да позволим на браузъра да вмъкне, в този случай, div.   -  person Thomas Jones    schedule 27.07.2012
comment
Друго решение може да бъде да поемете пълен контрол върху събитията за изтриване на ключ. Можете да използвате наследената функционалност, когато е необходимо, и да блокирате събитието, когато не е желателно. Или дори използвайте 100% персонализирана логика за изтриване. Редактиране: Признаваме, че получаването на позицията на каретката може да бъде малко трудно, но със сигурност е възможно.   -  person Lea Hayes    schedule 27.07.2012
comment
@LeaHayes да, направихме нещо подобно на това. Не е перфектен, но определено е по-добър. rangy помогна много при определянето къде е курсорът в диапазона   -  person Thomas Jones    schedule 31.07.2012
comment
Aloha изглежда има доста солиден редактор (който може да бъде разширен), може би заслужава да се спомене: aloha-editor.org   -  person Lea Hayes    schedule 31.07.2012


Отговори (2)


Направете всеки участък contenteditable, тогава потребителят няма да може да изтрие участъка, който не искате да редактирате, и да се отървете от възможността за редактиране на div.

Ето моята версия на JSFiddle: http://jsfiddle.net/howderek/HgRsF/2/

person howderek    schedule 01.08.2012
comment
Това е потенциално решение, но не отговаря на това, от което се нуждаем, тъй като това е в обхвата на редактор с форматиран текст и div е блокът на редактируемата област. Разстоянията вътре в div са резултат от редица операции за стилизиране на текста по определен начин. - person Thomas Jones; 02.08.2012
comment
Добре. Мога ли да попитам защо искате един участък да бъде защитен от редактиране, въпреки че е в областта за редактиране? - person howderek; 02.08.2012
comment
това беше лошо дизайнерско решение от самото начало и за съжаление продуктът е достатъчно напреднал, че се задържа. Тези конкретни интервали са стойности за многократна употреба, чието съдържание се управлява по различен начин и може да бъде включено в няколко различни документа. Те не могат да се редактират от секцията със съдържание, така че потребителите са принудени да използват техния характер за многократна употреба. Истинското решение тук беше ръчно да обработваме натисканията на клавишите за въвеждане/изтриване, когато трябваше, и имаме добро решение за това, но все още несъвършено - person Thomas Jones; 02.08.2012

Въпросът е от 2012 г. и оттогава този проблем беше коригиран и вложените contenteditable тагове работят по предназначение. Все още има някои проблеми като този бъг, но като цяло функцията трябва да може да се използва.

person mik01aj    schedule 18.08.2014
comment
Изглежда, че това все още се показва в примера за JSFiddle, свързан по-горе в моя браузър (Chrome 40) - person Chris; 23.12.2014