Метод выбора IE TextRange не работает должным образом

Недавно я работал на сайте, который использовал Microsoft CMS с «MSIB + pack» элементов управления, который включал редактор WYSIWYG, работающий в Internet Explorer.

Кажется, я помню некоторые комментарии в клиентском Javascript редактора, которые были конкретно связаны с этой ошибкой в ​​IE и методом Range.Select ().

К сожалению, я там больше не работаю, поэтому не могу получить доступ к файлам Javascript, но, возможно, вы сможете получить их откуда-нибудь?

Удачи

Я немного покопался и, к сожалению, не вижу обходного пути ... Хотя одна вещь, которую я заметил при отладке javascript, похоже, что проблема на самом деле связана с самим объектом диапазона, а не с последующим range.select(). Если вы посмотрите на значения в объекте диапазона, который возвращает selection.createRange(), да, родительский объект dom может быть правильным, но информация о позиционировании уже относится к началу следующей строки (т.е. offsetLeft / Top, boundingLeft / Top и т. д. Уже неправильный).

Основываясь на информации здесь, здесь и здесь, я думаю, вам не повезло с IE, поскольку у вас есть доступ только к объекту Microsoft TextRange, который, похоже, не работает. Исходя из моих экспериментов, вы можете перемещать диапазон и позиционировать его точно там, где он должен быть, но как только вы это сделаете, объект диапазона автоматически перейдет к следующей строке, даже до того, как вы попытались установить его в .select(). Например, вы можете увидеть проблему, поместив этот код между шагами 1 и 2:

if (range.boundingWidth == 0)
{
    //looks like its already at the start of the next line down...
    alert('default position: ' + range.offsetLeft + ', ' + range.offsetTop);
    //lets move the start of the range one character back
    //(i.e. select the last char on the line)
    range.moveStart("character", -1);
    //now the range looks good (except that its width will be one char);
    alert('one char back: ' + range.offsetLeft + ', ' + range.offsetTop);
    //calculate the true end of the line...
    var left = range.offsetLeft + range.boundingWidth;
    var top = range.offsetTop;
    //now we can collapse back down to 0 width range
    range.collapse();
    //the position looks right
    alert('moving to: ' + left + ', ' + top);
    //move there.
    range.moveToPoint(left, top);
    //oops... on the next line again... stupid IE.
    alert('moved to: ' + range.offsetLeft + ', ' + range.offsetTop);
}

Так что, к сожалению, не похоже, что есть какой-либо способ убедиться, что диапазон находится в нужном месте, когда вы выбираете его снова.

Очевидно, есть тривиальное исправление вашего кода выше, изменив его на шаге 2 следующим образом:

// Step 2 Restore the selection
if (range.select) {
    if (range.boundingWidth > 0) {
        range.select();
    }
} else {
    selection.removeAllRanges();
    selection.addRange(range);
    doc.body.focus();
}

Но, по-видимому, вы действительно хотите сделать что-то между Шагом 1 и Шагом 2 в вашем реальном, что включает в себя перемещение выделения, следовательно, необходимо его переустановить. Но на всякий случай. :)

Итак, лучшее, что я могу сделать, это пойти и проголосовать за созданную вами ошибку ... Надеюсь, они ее исправят.

Я придумал несколько методов работы с такими диапазонами IE.

Если все, что вы хотите сделать, это сохранить место, где находится курсор, а затем восстановить его, вы можете использовать метод pasteHTML, чтобы вставить пустой диапазон в текущую позицию курсора, а затем использовать метод moveToElementText, чтобы вернуть его в это положение. очередной раз:

// Save position of cursor
range.pasteHTML('<span id = "caret"></span>')

...

// Create new cursor and put it in the old position
var caretSpan = iframe.contentWindow.document.getElementById("caret");
var selection = iframe.contentWindow.document.selection;
newRange = selection.createRange();
newRange.moveToElementText(caretSpan);

Кроме того, вы можете подсчитать, сколько символов предшествует текущей позиции курсора, и сохранить это число:

var selection = iframe.contentWindow.document.selection;
var range = selection.createRange().duplicate();
range.moveStart('sentence', -1000000);
var cursorPosition = range.text.length;

Чтобы восстановить курсор, вы устанавливаете его в начало, а затем перемещаете на это количество символов:

var newRange = selection.createRange();
newRange.move('sentence', -1000000);
newRange.move('character', cursorPosition);

Надеюсь это поможет.

Возможно, я неправильно понял, но если я щелкну справа от этой первой строки, мой курсор сразу же появится в начале второй строки, так что это не проблема TextRange, верно?

Добавление doctype, чтобы тестовая страница отображалась в стандартном режиме, а не в режиме quirks, исправляет это для меня.

И я не могу воспроизвести то, что делает ваша функция myhandler, потому что нажатие этой кнопки перемещает фокус на кнопку, поэтому я больше не могу видеть курсор и не могу вернуть его. Нахождение позиции курсора в области contentEditableкажется, это совсем другая проблема.