Aggiungi elemento prima/dopo la selezione del testo

Question

Sto cercando una funzione che mi permetta di costruire un elemento prima o dopo il testo selezionato. Qualcosa di simile a questo javascript replace selection all browsers ma per aggiungere del contenuto prima o dopo la selezione anziché sostituirlo, come i metodi after() e before() jQuery. Dovrei usare qualche metodo di selezione DOM, se sì quale? O esiste qualcosa di più facile da realizzare?

Answer 1

Ecco un paio di funzioni per fare questo.

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

Codice:

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

In MSIE: collapse determinato intervallo e l'uso pasteHTML inserire l'elemento

Altri: anche collapse dato Range e inserire l'elemento tramite insertNode

---

Entrambi collapse-methods accetta un argomento facoltativo che definisce dove si vuole collassare. Se si desidera mettere l'elemento alla fine, collassare fino alla fine, altrimenti all'inizio.