Выделите / выберите несколько div с диапазонами w / contenteditable?

Question

Допустим, у меня есть набор contenteditable="true" делений.

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

У меня не может быть одного деления, необходимо несколько делений. Как я могу выделить содержимоеболее одного div?Используя диапазоны?Что-нибудь еще?

Answer 1

Ответ в том, что это зависит от браузера.См. этот пример для проверки двух методов с использованием диапазонов.Первая попытка создать диапазон для каждого редактируемого <div> и добавить их все в выделение.Вторая попытка создать один диапазон, охватывающий содержимое двух редактируемых <div> s.

Результаты:

• Во всех браузерах пользователь не может создать выделениекоторый находится в более чем одном редактируемом элементе;
• Firefox - самый разрешительный из основных браузеров.Оба программных метода работают.
• Safari и Chrome наименее разрешительны: ни один метод не выбирает содержимое из более чем одного редактируемого элемента.
• Opera 11 не поддерживает несколько диапазонов в выделении, но поддерживаетвыбранный диапазон, охватывающий несколько редактируемых элементов.
• IE, предшествующая версии 9, не поддерживает DOM Range или тот же API Selection, что и другие браузеры, но эквивалентный код TextRange не позволяет выбирать из болеечем один редактируемый элемент.

Answer 2

Возможно переключить div на contenteditable="false" на лету, как следствие запуска выбора в одном из них. Что-то вроде этого дает вам идею (используя JQuery):

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

Вот скрипка для демонстрации (тестируется только в Chrome).

Обратите внимание, что в примере со скрипкой первый Div ContentEditable получает фокус. Это позволяет вам печатать как обычно, но как только вы выделите что-либо, используя мышь или клавиатуру, вы увидите, что вы можете расширить выделение на элементы div как обычно.

Это, очевидно, нуждается в уточнении для работы с несколькими браузерами и возврата к contenteditable="true" соответственно. Но я думаю, что подход верен.