Editing Iframe Content in IE - problem in maintaining text selection

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. Thi开发者_JS百科s 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.

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

In IE9 I fixed this problem by adding property unselectable="on" for all div-buttons.

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

You mean your buttons are inside the iframe? If they are, just try to take them out.

If not, you should try something like:

• You add a and an element (which do not exist but who cares, it'll work) just before and just after the range that way:

  range.pasteHTML( "" + range.htmlText + "" );

• Than, you'll do your stuff with execCommand and so on.

• After that, you'll restore the focus by creating a range, getting references to the start and the end elements, making the range contain one of them, move the other endpoint of the range to the other, select the range and remove the start and the end elements from the DOM and from memory.

I've done something like that for one of my projects but it was long ago so I might have forgotten something. It would be nice of you could upload your code on pastebin or something so that we can tackle the problem directly.