execCommand insertHTML разрывает сохраненное window.getSelection()

При использовании методов выделения текста и восстановления выделенного текста на странице, я обнаружил, что работает execCommand('insertHTML... inbetween вызывает разрыв сохраненного выделения.

Это пример того, как текст выделен и восстановлен.

// Get Selection
 var sel = window.getSelection().getRangeAt(0);
 // Clear Selections 
 window.getSelection().removeAllRanges();
 // Restore Selection 
 window.getSelection().addRange(sel)

Это работает нормально, однако, как только вы запустите execCommand('insertHTML.. выборы endOffset устанавливает то же значение, что и выбор startOffset

Для этого есть причина? Более важно, есть ли способ обойти это?


Полный пример ошибки, в комплекте с некоторыми основными журналами консоли можно увидеть здесь. http://jsfiddle.net/blowsie/Y8pJ7/

Задача этой скрипки - выделить текст, преобразовать его в верхний регистр, а затем повторно выбрать текст.

1 ответ

Решение

Как лучше сохранить и восстановить выбор, зависит от того, что вы делаете. Для вашего конкретного примера, где существующий текст просто преобразуется в регистр, я бы предложил подход, основанный на индексировании символов, такой как /questions/10129971/zamenite-innerhtml-v-contenteditable-div/10129977#10129977 (хотя этот ответ требует Rangy, но может быть тривиально измененным, чтобы не требовать этого: http://jsfiddle.net/Y8pJ7/8).

В некоторых других случаях лучшим подходом является использование невидимых элементов маркера в начале и конце выделения, что является подходом, принятым модулем сохранения / восстановления выбора Rangy (раскрытие: я автор Rangy).

ОБНОВЛЕНИЕ 18 июня 2012

Rangy теперь имеет сохранение и восстановление выделенных областей и диапазонов с помощью символьного смещения с помощью нового модуля TextRange ( демонстрация).

Другие вопросы по тегам