选择后插入HTML

时间:2010-08-30 00:10:20

标签: javascript dom

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

我已经确定了如何在双击时触发一个函数,它正在找到选择并随后在它之后插入HTML即问题。

3 个答案:

答案 0 :(得分:13)

以下函数将在所有主流浏览器的选择结尾处插入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();
    }
}

答案 1 :(得分:1)

window.getSelection()将为您提供所选文本(Documentation)。 您可以使用jQuery.after()(Documentation)在元素后插入新的html。

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

这是我目前可以想到的最佳方式。它并不完美,但它还是可以开始的。

答案 2 :(得分:0)

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

在双击活动中,您可以获得event object and access the property target

拥有目标元素you can get the selected text

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

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

希望我能帮上忙。