Редактирование содержимого Iframe в IE - проблема в сохранении выбора текста

Может ли кто-нибудь, пожалуйста, направить меня надлежащим образом, если это возможно? Я на самом деле пытался создать текстовый редактор, используя iframe с designMode = 'on'. Кнопки на панели редактирования состоят из разделов, в которых действия запускаются событием onclick, которое затем использует функцию execCommand. Я сделал все, что отлично работает в Firefox и других браузерах, кроме IE. Я полагал, что основной причиной этого является неспособность IE поддерживать фокус и сохранять выбор диапазона в тексте внутри iframe. Это происходит каждый раз, когда я нажимаю кнопки, чтобы манипулировать текстами. Мой вопрос: как я могу предотвратить это? Я считаю, что используя < a href= "javascript: functionHere()" > метод может частично решить проблему, но он ограничен только одной командой щелчка, такой как полужирный, курсив и т.д., где дальнейший щелчок не будет подобен щелчку другого текстового поля, чтобы добавить ссылку или изображение, из-за чего выбор текста объекта исчезнет. Скажите, пожалуйста, знаете ли вы.

Обновление: Упрощенную версию моего кода можно найти здесь: http://pastebin.com/XrZ4duCb

Вы можете скопировать и протестировать его.

Теперь я попробую ваше решение. Спасибо за ответы.

Обновление: Удалось исправить коды с помощью другого метода. Тем не менее, некоторые ошибки все еще можно наблюдать. Проверьте здесь: http://pastebin.com/qP8sYUH7

Спасибо.

Ответ 1

Если вы не меняете размер DOM в редакторе между ним и теряете фокус, тогда выполняются следующие функции: вызовите saveSelection(iframeWindow) до того, как документ редактора потеряет фокус и restoreSelection(iframeWindow, sel) после того, как он восстановит фокус. В противном случае я бы предложил использовать Rangy библиотека сохранить/восстановить модуль выбора, в котором используются скрытые элементы маркера.

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();
        }
    };
}

Ответ 2

В IE9 я исправил эту проблему, добавив свойство unselectable="on" для всех div-кнопок.

<div onclick="onBold()" unselectable="on">Bold</div>

Ответ 3

Вы имеете в виду, что ваши кнопки находятся внутри iframe? Если они есть, просто попробуйте их вынуть.

Если нет, вы должны попробовать что-то вроде:

Вы добавляете a и элемент (который не существует, но кто заботится, он будет работать) непосредственно перед и сразу после диапазона таким образом:

range.pasteHTML( "+ range.htmlText +" ");
Чем больше вы будете делать с execCommand и т.д.
После этого вы восстановите фокус создание диапазона, получение ссылок на начальный и конечный элементы, включение диапазона в один из них, переместить другую конечную точку диапазона в другую, выбрать диапазон и удалить начальные и конечные элементы из DOM и из памяти.

Я сделал что-то подобное для одного из моих проектов, но это было давно, поэтому я мог что-то забыть. Было бы неплохо, если бы вы могли загрузить свой код на pastebin или что-то еще, чтобы мы могли решить проблему напрямую.