选择后插入HTML [英] Insert HTML after a selection

问题描述

我想要双击以选择一个div中的一些文本，然后触发一个JavaScript函数，在所选文本之后插入一些HTML，就像Google Wave中的编辑/回复功能一样。 p>

我已经建立了如何在双击时触发一个功能，它是定位选择，并在之后插入HTML就是问题。

解决方案

以下功能将在所有主要浏览器的选择结束时插入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字符串： p>

  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（）在这里很有用，但
 //非标准，所有浏览器都不支持（IE9，一个）
 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（）在这里很有用，但
 //非标准，所有浏览器都不支持（IE9，一个）
 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）; 
 
 //保留选择
 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（）; 
} 
} 
  

I want to be able to double-click to select some text in a div, which then triggers a JavaScript function that inserts some HTML after the selected text, much like the 'edit/reply' feature in Google Wave.

I have already established how to trigger a function on double-clicking, it is locating the selection and subsequently inserting HTML after it that is the problem.

解决方案

The following function will insert a DOM node (element or text node) at the end of the selection in all major browsers (note that Firefox now allows multiple selections by default; the following uses only the first selection):

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

If you would rather insert an HTML string:

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

Update 18 January 2012

Finally, here's a version that inserts HTML and preserves the selection (i.e. expands the selection to include the originally selected content plus the inserted content).

Live demo: http://jsfiddle.net/timdown/JPb75/1/

Code:

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

这篇关于选择后插入HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！