Agregar elemento antes/después de la selección de texto

Question

Estoy buscando una función que me permita construir algún elemento antes o después del texto seleccionado. Algo similar como este javascript replace selection all browsers pero para agregar algo de contenido antes o después de la selección en lugar de reemplazarlo, como after() y before() jQuery. ¿Debería usar algún método de selección DOM, en caso afirmativo, cuál? ¿O existe algo más fácil de llevar a cabo?

Answer 1

Aquí hay un par de funciones para hacer esto.

ejemplo vivo: http://jsfiddle.net/hjfVw/

Código:

var insertHtmlBeforeSelection, insertHtmlAfterSelection; 

(function() { 
    function createInserter(isBefore) { 
     return function(html) { 
      var sel, range, node; 
      if (window.getSelection) { 
       // IE9 and non-IE 
       sel = window.getSelection(); 
       if (sel.getRangeAt && sel.rangeCount) { 
        range = window.getSelection().getRangeAt(0); 
        range.collapse(isBefore); 

        // 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) { 
       // IE < 9 
       range = document.selection.createRange(); 
       range.collapse(isBefore); 
       range.pasteHTML(html); 
      } 
     } 
    } 

    insertHtmlBeforeSelection = createInserter(true); 
    insertHtmlAfterSelection = createInserter(false); 
})(); 

Answer 2

En MSIE: collapse del rango dado y el uso pasteHTML insertar el elemento

Otros: También collapse del rango dado e inserte el elemento a través de insertNode

---

Tanto colapso: los métodos aceptan un argumento opcional que define dónde desea contraerse. Si desea poner el elemento al final, colapsar hasta el final, de lo contrario hasta el comienzo.