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

Answer 1

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

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

Answer 2

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.

Answer 3

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