Zaznacz/wybierz wiele elementów div z zakresami w/contenteditable?

Question

Załóżmy, że mam zestaw elementów div contenteditable="true".

<div id="0" contenteditable="true"></div> 
<div id="1" contenteditable..></div> 
<div...etc></div> 

Nie mogę mieć jeden div, wiele DIV jest koniecznością. Jak mogę podświetlić treść więcej niż jednego elementu div? Używasz zakresów? Coś jeszcze?

Answer 1

Odpowiedź jest taka, że ​​zależy to od przeglądarki. Zobacz this example, aby przetestować dwie metody za pomocą zakresów. Pierwsze próby utworzenia zakresu na edytowalną całość i dodanie ich do zaznaczenia. Druga próba utworzenia pojedynczego zakresu obejmuje zawartość dwóch edytowalnych <div>.

Wyniki:

• we wszystkich przeglądarkach, niemożliwe jest, aby użytkownik mógł utworzyć zaznaczenie, że mieszka w więcej niż jednej edycji elementu;
• Firefox jest najbardziej permisywnym z głównych przeglądarek. Obydwie metody programistyczne działają.
• Safari i Chrome są najmniej pobłażliwe: żadna z metod nie wybiera treści z więcej niż jednego edytowalnego elementu.
• Opera 11 nie obsługuje wielu zakresów w zaznaczeniu, ale obsługuje wybrany zakres obejmujący więcej niż jeden edytowalny element.
• Wstępna wersja IE 9 nie obsługuje funkcji DOM Range lub tego samego interfejsu API Selection, jak inne przeglądarki, ale odpowiadający jej kod TextRange nie pozwala na wybór z więcej niż jednego edytowalnego elementu.

Answer 2

Istnieje możliwość przełączenia elementów div na contenteditable="false" w locie w wyniku rozpoczęcia selekcji w jednym z nich. Coś takiego daje pomysł (przy użyciu jQuery):

$('div').bind("selectstart", function() { 
    $('div').attr("contenteditable", false); 
});​ 

Here's a fiddle to demonstrate (tylko przetestowane w Chrome).

Uwaga na przykładzie skrzypiec, że pierwszy Div ContentEditable dostaje fokus. To pozwala na wpisywanie w normalny sposób, ale gdy tylko wybierzesz cokolwiek, używając myszy lub klawiatury, zobaczysz, że możesz normalnie rozszerzać wybór między elementami div.

To oczywiście wymaga dopasowania do pracy z wieloma przeglądarkami i powrotu z powrotem do contenteditable="true". Ale myślę, że podejście jest prawidłowe.