Newlines i contenteditable z zagnieżdżonymi, nieedytowalnymi tagami

Mam dziwny przypadek dla elementów contenteditable w HTML. Mamy edytor tekstu sformatowanego, w którym klienci ładują gotowe szablony (przez nas), a następnie mogą modyfikować ten szablon, ale chcą (najczęściej).Newlines i contenteditable z zagnieżdżonymi, nieedytowalnymi tagami

Część naszych szablonów została oznaczona jako nie do bezpośredniego edytowania, ale nadal można je usunąć itp. Jednak wydaje się, że występuje problem, gdy jeden taki element jest pierwszym elementem w linii (bezpośrednio po tagu <br/>), a użytkownik trafia na DEL w powyższej linii. Ponieważ jest to contenteditable=false, wydaje się, że przeglądarka nie usuwa <br/>, ale całego zakresu nieedytowalnego.

Przykładowy HTML jest jak ten

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

Jeśli użytkownik stawia ich kursor po blah blah blah i uderza DEL cały następny zawartość edycji zostanie usunięty, zamiast przerwy linii.

Czy jest jakiś sposób, javascript lub w inny sposób, aby naprawić to zachowanie?

Ive oszukał, próbując wykryć pozycję kursora (używając rangy) i wstawiając tymczasowe spacje, itp., Ale nie wydaje mi się, aby uzyskać pożądane zachowanie, które jest po prostu nieczytelnym tagiem do poprzedniej linii.

Ograniczono korzystanie z edytora tylko w Chrome, więc nie musisz się martwić o IE lub FF.

jsfiddle of an example

Źródło

2012-07-12 Thomas Jones

Czy '
' jest częścią twojego szablonu? Jeśli tak, to nie możesz użyć 3 'div's zamiast używać'
'? –

Tak. Z powodów, które nie są do końca pewne (prawdopodobnie do renderowania), zastąpiliśmy klawisz Enter, aby wstawić podział wiersza, zamiast pozwolić przeglądarce wstawić, w tym przypadku divs. –

Innym rozwiązaniem może być przejęcie pełnej kontroli nad zdarzeniami kluczowymi usuwania. W razie potrzeby można użyć odziedziczonej funkcji i zablokować zdarzenie, gdy nie jest to pożądane. Lub nawet użyj 100% niestandardowej logiki usuwania. * Edycja: * Dopuszczenie zdobycia pozycji opiekuna może być trochę trudne, ale na pewno jest możliwe. –

Bądź każdy przedział contenteditable, wówczas użytkownik nie będzie mógł usunąć rozpiętość nie chcesz edytować, i pozbyć się div są edytowalne.

Oto moja wersja JSFiddle: http://jsfiddle.net/howderek/HgRsF/2/

Źródło

2012-08-01 21:03:20 howderek

Jest to potencjalne rozwiązanie, ale nie pasuje do tego, czego potrzebujemy, ponieważ znajduje się w zakresie edytora tekstu sformatowanego, a div jest blokiem obszaru edytowalnego. Rozpiętości wewnątrz elementu div są wynikiem wielu operacji, które mają na celu ukształtowanie tekstu w określony sposób. –

Ok. Czy mogę zapytać, dlaczego chcesz, aby jedno span było bezpieczne przed edycją, nawet jeśli znajduje się w obszarze edycji? – howderek

była to zła decyzja projektowa od samego początku i niestety produkt jest wystarczająco długi, aby utknąć.Te szczególne rozpiętości są wartościami wielokrotnego użytku, których treść jest zarządzana w różny sposób i można je podłączyć do kilku różnych dokumentów. Są one niedozwolone z sekcji zawartości, tak aby użytkownicy byli zmuszeni korzystać z ich wielokrotnego użytku. Prawdziwym rozwiązaniem w tym przypadku było ręczne obsługiwanie naciśnięć klawiszy Enter/Delete, kiedy musieliśmy, i mamy na to rozwiązanie, ale wciąż niedoskonałe –

Pytanie jest od 2012 roku i od tego czasu problem ten został rozwiązany i zagnieżdżone contenteditable tagi działać zgodnie z przeznaczeniem. Nadal występują pewne problemy, takie jak this bug, ale ogólnie rzecz biorąc, funkcja powinna być użyteczna.

Źródło

2014-08-18 14:35:00 mik01aj

To nadal wydaje się być widoczne w przykładzie JSFiddle powiązanym z powyższym w mojej przeglądarce (Chrome 40) – Chris

Newlines i contenteditable z zagnieżdżonymi, nieedytowalnymi tagami

Odpowiedz

Powiązane problemy