Сохранить позицию курсора в contenteditable div [duplicate]
На этот вопрос уже есть ответ здесь:
Сохранение изменений объектов диапазона после выделения в HTML 3 ответаПрежде всего, это похоже на это:
Редактирование содержимого iframe в IE - проблема с поддержанием выделения текста
Как получить позицию каретки внутри contenteditable div с html дочерними элементами?
По сути, я пишу что-то похожее на новый редактор твитов в твиттере. Внутриdiv
с участиемcontentEditable
установить, я анализирую текст. Когда я обнаруживаю то, что я считаю URL, я удаляю этот текст и<a>
тег внутри div (например, введенное сообщениеgo to www.google.com
становитсяGo to <a href='..'>www.google.com</a>
, НО, позиция каретки теряется, когда я это делаю.
Использование предложения @ Tim-Down в этих других сообщениях SO будет работать, только если вы не редактируете DOM (как он говорит). Я редактирую DOM, поэтому позиция каретки теряется.
Возможно ли (в идеале без использования библиотеки Rangy, на которую есть ссылки) добиться этого, работая над текущим кодом.
Код, который у меня есть на данный момент (из других сообщений SO):
var saveSelection, restoreSelection;
if (window.getSelection) {
// IE 9 and non-IE
saveSelection = function(win) {
var sel = win.getSelection(), ranges = [];
if (sel.rangeCount) {
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
ranges.push(sel.getRangeAt(i));
}
}
return ranges;
};
restoreSelection = function(win, savedSelection) {
var sel = win.getSelection();
sel.removeAllRanges();
for (var i = 0, len = savedSelection.length; i < len; ++i) {
sel.addRange(savedSelection[i]);
}
};
} else if (document.selection && document.selection.createRange) {
// IE <= 8
saveSelection = function(win) {
var sel = win.document.selection;
return (sel.type != "None") ? sel.createRange() : null;
};
restoreSelection = function(win, savedSelection) {
if (savedSelection) {
savedSelection.select();
}
};
}
И я использую это так:
$('div').on('keyup paste', function(e) {
var ranges = saveSelection(window);
var newContent = /* Get the new HTML content */;
$('div').html(newContent);
restoreSelection(window, ranges);
});