javascript - Editing Iframe Content in IE - problem in maintaining text selection

Question

can somebody please guide me the proper way if this is possible? I was actually trying to make a text editor using iframe with designMode='on'. The buttons in the editing bar are made up of divs where the actions are being triggered by an onclick event which then utilize the execCommand function. I made the whole thing work perfectly in Firefox and other browsers except for IE. I figured that the main reason for this is the inability of IE to maintain focus and keep the range selection to the text inside iframe. This happens everytime I click the buttons to manipulate the texts. My question is, how can I prevent this from happening? I believe using the <a href="javascript:functionHere()"> method could partially solve the problem but it is only limited to a single click command like bold, italic, etc. where no further clicking is involed like clicking another text field to add link or image which causes the selection of the subject text to disappear. Please tell me if you know.

Update: A simplified version of my code can be found here: http://pastebin.com/XrZ4duCb

You can copy and test it.

I'll try your solution now. Thanks for the replies.

Update: Managed to fix the codes using different method. However, some bugs can still be observed. Check here: http://pastebin.com/qP8sYUH7

Thanks.

Answer 1

If you're not changing the editor frame's DOM between it losing and regaining focus then the following functions will do: call saveSelection(iframeWindow) before the editor document loses focus and restoreSelection(iframeWindow, sel) after it regains focus. Otherwise, I'd suggest using my Rangy library's save/restore selection module, which uses hidden marker elements.

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