help for a multibrowser contentaditable div

Question

UPDATE:

You can see the code at http://jsfiddle.net/sV3us/1/

I got this function. It works with non IE browsers, but IE9 is not working. I'm calling this function with execCommandOnElement(testDiv, "insertHTML", "some content")

function execCommandOnElement(el, commandName, value) {
    if (typeof value == "undefined") {
        value = null;
    }

    if (typeof window.getSelection != "undefined") {
        // Non-IE case

        // Temporarily enable designMode so that
        // document.execCommand() will work
        document.designMode = "on";

        //place caret
        selection.collapse (anchorNode, anchorOffset);
        selection.extend( focusNode, focusOffset);

        // Execute the command
        document.execCommand(commandName, false, value);

        // Disable designMode
        document.designMode = "off";

    } 
    else if (typeof document.body.createTextRange != "undefined") {
    close_modal (); 
        // IE case
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        document.execCommand(commandName, false, value);
    }
}

I dont need to select something in my content editable div (for example to bold a text), I just need that IE pastes the HTML where the caret is placed. Because I need to use dialog box to get some content to paste, I use this function to know where to place it.

//launch
$(".launch_modal").click(function() {
   open_modal ( $(this).attr( 'data-modal' ) );

    selection = window.getSelection() ; 
    anchorNode = selection.anchorNode;
    anchorOffset = selection.anchorOffset;
    focusNode = selection.focusNode;
    focusOffset = selection.focusOffset;               
});

I really appreciate your help. I have been in this all day.

When I clik on the Submit button, the dialog closes, but there is nothing in the editable div and this div is surrounded by 6 squares, ready to by resized. — earlyriser, Jul 18 '11 at 00:30
can you create a [jsfiddle](http://jsfiddle.net) of this please — Ibu, Jul 18 '11 at 00:32
@Ibu http://jsfiddle.net/sV3us/ Please let me know if that's ok. I clean the not important parts and omit css — earlyriser, Jul 18 '11 at 00:50

score 2 · Accepted Answer · edited May 23 '17 at 12:04

I gave you code to help with this yesterday. Perhaps you didn't realise that saving the caret position is exactly the same as saving the selection? Also, you don't need what the execCommandOnElement() function is doing for you: the stuff with enabling designMode is only for dealing with non-editable content, so you can remove this function entirely and just use document.execCommand().

One reason your code won't work is that IE 9 does support window.getSelection() but does not support the non-standard extend() method of the selection.

Here's an example of what I think you want:

jsFiddle: http://jsfiddle.net/nmd3A/2/

Code:

var saveSelection, restoreSelection;
if (window.getSelection) {
    // IE 9 and non-IE
    saveSelection = function() {
        var sel = window.getSelection(), ranges = [];
        if (sel.rangeCount) {
            for (var i = 0, len = sel.rangeCount; i < len; ++i) {
                ranges.push(sel.getRangeAt(i));
            }
        }
        return ranges;
    };

    restoreSelection = function(savedSelection) {
        var sel = window.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() {
        var sel = document.selection;
        return (sel.type != "None") ? sel.createRange() : null;
    };

    restoreSelection = function(savedSelection) {
        if (savedSelection) {
            savedSelection.select();
        }
    };
}

var savedSel = saveSelection();

// Open the dialog...
// ...dialog closes

restoreSelection(savedSel);
try {
    document.execCommand("InsertHTML", false, "<b>INSERTED</b>");
} catch (ex) {
    if (document.selection && document.selection.createRange) {
        var range = document.selection.createRange();
        if (range.pasteHTML) {
            range.pasteHTML("<b>INSERTED</b>");
        }
    }
}

Thanks a lot Tim. This is exactly what I want. However it's not working with ie9 on my machine. Does it works in your system? — earlyriser, Jul 20 '11 at 00:46
@earlyriser: Sorry, I forgot that IE doesn't support the `InsertHTML` command. I've updated my answer with an IE alternative. — Tim Down, Jul 20 '11 at 08:25

help for a multibrowser contentaditable div

You can see the code at http://jsfiddle.net/sV3us/1/

1 Answers1