多浏览器内容可编辑 div 的帮助

Question

更新：

你可以在http://jsfiddle.net/sV3us/1/看到代码

我得到了这个功能。它适用于非 IE 浏览器，但 IE9 不起作用。 我用这个函数调用 execCommandOnElement(testDiv, "insertHTML", "一些内容")

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

我不需要在我的内容可编辑 div 中选择某些内容（例如将文本加粗），我只需要 IE 将 HTML 粘贴到插入符号所在的位置。因为我需要使用对话框来获取一些要粘贴的内容，所以我使用这个函数来知道放置它的位置。

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

非常感谢您的帮助。我整天都在这。

Answer 1

昨天我给了你code to help with this。也许您没有意识到保存插入符号位置与保存选择完全相同？此外，您不需要execCommandOnElement() 功能为您做什么：启用designMode 的东西仅用于处理不可编辑的内容，因此您可以完全删除此功能，只需使用document.execCommand()。

您的代码不起作用的一个原因是 IE 9 确实支持 window.getSelection()，但不支持非标准的 extend() 选择方法。

这是我认为您想要的示例：

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

代码：

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