选择后插入HTML

Question

我希望能够双击以在div中选择一些文本,然后触发一个JavaScript函数,在所选文本之后插入一些HTML,就像Google Wave中的"编辑/回复"功能一样.

我已经建立了如何在双击时触发函数,它正在定位选择并随后在它之后插入HTML即问题.

Answer 1

以下函数将在所有主流浏览器的选择结尾处插入DOM节点(元素或文本节点)(请注意,Firefox现在默认允许多个选择;以下仅使用第一个选择):

function insertNodeAfterSelection(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.collapse(false);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

如果您想要插入HTML字符串:

function insertHtmlAfterSelection(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            range.collapse(false);

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        range.collapse(false);
        range.pasteHTML(html);
    }
}

2012年1月18日更新

最后,这是一个插入HTML并保留选择的版本(即扩展选择以包括最初选择的内容加上插入的内容).

现场演示:http://jsfiddle.net/timdown/JPb75/1/

码:

function insertHtmlAfterSelection(html) {
    var sel, range, expandedSelRange, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            expandedSelRange = range.cloneRange();
            range.collapse(false);

            // Range.createContextualFragment() would be useful here but is
            // non-standard and not supported in all browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                expandedSelRange.setEndAfter(lastNode);
                sel.removeAllRanges();
                sel.addRange(expandedSelRange);
            }
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        expandedSelRange = range.duplicate();
        range.collapse(false);
        range.pasteHTML(html);
        expandedSelRange.setEndPoint("EndToEnd", range);
        expandedSelRange.select();
    }
}

Answer 2

window.getSelection() 将为您获取所选文本（文档）。您可以使用 jQuery.after() （文档）在元素后插入新的 html。

在您选择的文本函数调用中，您必须循环遍历所有 DOM 元素，检查它们的 x&y 位置到当前光标位置 - 获取最接近的元素并在后面插入或使用函数 .elementFromPoint(x,y) （文档）

这是我目前能想到的最好的办法。它并不完美，但它是一个开始。