Диапазоны выбора в веб-наборе (Safari / Chrome)

Question

Я использую редактируемый по содержимому iframe для создания подсветки синтаксиса в javascript, и одна из самых важных вещей - уметь правильно кодировать отступ.

Следующий код работает так же, как и в Firefox:

// Create one indent character
var range = window.getSelection().getRangeAt(0);
var newTextNode = document.createTextNode(Language.tabChar);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);

Создает символ табуляции и перемещает курсор к правой стороне символа. В Chrome и Safari символ вставляется, но курсор не перемещается вправо от него.

Я проверил объект диапазона в Chrome и Firefox, а затем заметил, что объект диапазона Firefox гораздо богаче, чем объект Chrome. Мне не удалось найти какие-либо характеристики объекта диапазона в WebKit.

Как я могу заставить этот код работать и для webkit и для Firefox?

Спасибо!

Answer 1

Объекты Range как Firefox, так и WebKit полностью соответствуют спецификации DOM Range . Если у Firefox больше свойств, то они будут собственными расширениями Mozilla, но обычно в спецификации есть все, что вам может понадобиться.

В любом случае, проблема в том, что вам нужно повторно выбрать диапазон после его изменения:

// Create one indent character
var sel = window.getSelection();
var range = sel.getRangeAt(0);
var newTextNode = document.createTextNode(Language.tabChar);
range.insertNode(newTextNode);
range.setStartAfter(newTextNode);
sel.removeAllRanges();
sel.addRange(range);

Обратите внимание, что это не будет работать в более ранних версиях Safari (я думаю, до 3-й версии), поскольку его объект выбора не поддерживает getRangeAt. Для этого есть обходной путь, который я могу вам предоставить.