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

Я использую редактируемый 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);

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

Я проверил объект диапазона как в Chrome, так и в Firefox, а затем заметил, что объект диапазона Firefox намного богаче, чем у Chrome. Я не смог найти какие-либо спецификации объекта диапазона в webkit.

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

Спасибо!

Ответ 1

Оба объекта Firefox и WebKit Range полностью соответствуют спецификации 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. Существует обходное решение для этого, которое я могу предоставить, если вам это нужно.