Question

我想在一个可疑的div中插入一些html。

编辑内容时，用户点击一个图标，弹出一个对话框，然后输入网址＆amp;在对话框中锚定文本。这导致可编辑的div失去焦点，链接插入div的开头，而不是插入符号。我尝试过很多东西，但是我被卡住了。

我的可修改内容div的“rte”ID

对话框中按钮的“link_add”id

$('#link_add').click(function (e)
{       
    $('#rte').focus();                  
    document.execCommand('insertHTML', false, 'html content test');         
    close_modal ();
    e.preventDefault();

});

我还尝试使用以下来自set execcommand just for a div的解决方案：

function execCommandOnElement(el, commandName, value)

但这会清空div并粘贴新内容。

Answer 1

我认为这是一个“内联”对话框（就像StackOverflow的链接对话框一样），它会移动焦点，从而移动选择。解决方案似乎是保存和恢复选择。调用getSelection（）以获取对选择的引用并保存anchorNode，anchorOffset，focusNode和focusOffset属性，然后使用collapse(anchorNode, anchorOffset)和{{1一旦你集中了contenteditable div，就恢复选择。（如果您对这两个节点不感兴趣，可以extend(focusNode, focusOffset)。）

Answer 2

您需要保存并恢复选择。当可编辑元素失去焦点时，如果选择被折叠（即只是插入符号），则IE for one会丢失它。注意IE＆lt; 9与其他浏览器具有完全不同的选择和范围对象。这里有一些代码可以在所有主流浏览器中使用，包括旧的IE。但请注意，它不会恢复选择的原始方向。如果您需要这样做，解决方案会变得更加复杂，无法在IE中完成。

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

关闭对话框后：

restoreSelection(savedSel);

或者，如果你进行了大量的选择/范围操作，你可以使用我的selection save/restore module库的Rangy，但这对于这一次使用来说是过度的。

Answer 3

由于以下两个原因，上面可能建议不能正常工作：首先，需要使用window.getSelection（）。getRangeAt（i）.cloneRange（），还有第二个 - 选择和范围是生活数据，并通过用户相关操作自动刷新，如新选择和焦点。

当插入符号位于内容可编辑div中时插入html

3 个答案: