选择后插入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（）（ Documentation ）在元素后插入新的html。

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

这是我目前可以想到的最佳方式。 这不是完美的，但它是一个可以开始的地方。

Answer 3

我不知道是否有可能，但我有部分解决方案。

在双击事件中，您可以获取事件对象并访问属性 target 。

拥有目标元素后， 您可以获取所选文本 。

现在获取目标元素html并找到所选文本的索引及其长度，在index + length位置注入html。

我想你已经看到了问题，它可以匹配多个地方的文本。 要解决它，你可能必须找到光标的位置并与元素进行比较，我不知道该怎么做...

希望我能帮到一点。