jQuery testo evidenziato surround con SPAN

Question

Il seguente codice dovrebbe circondare il testo evidenziato in un dato Div con uno span.

$(document).ready(function(){ 
    $('.format').click(function(){ 
     var highlight = window.getSelection(); 

     var spn = '<span class="highlight">' + highlight + '</span>'; 
     $('.conttext').content().replace(highlight, spn); 

    }); 
}); 

Una funzione di questo tipo potrebbero essere utilizzati per fornire opzioni di formattazione ad un DIV contenteditable HTML.

Qualcosa è chiaramente sbagliato anche se al momento non funziona.

http://jsfiddle.net/BGKSN/20/

Answer 1

Beh, prima di tutto, hai avuto il tuo html sbagliato, qualcosa di simile
<a href="" class="format">test</div>

In secondo luogo, quando si è tentato di fare clic testarlo deselezionata il testo selezionato, perché questo è ciò che accade se fai clic da qualche parte quando hai selezionato del testo. Quindi, con questo in mente, l'ho cambiato in $("body").keypress() in modo da avvolgere il testo evidenziato in span quando viene premuto un tasto. Inoltre, risolto alcuni dei codici jQuery e voilà, funziona!

Check it out here.

Se si fissa il tag di ancoraggio e la tua jQuery un po $(".contenttext").contents() dove .contents() è una funzione non existand a
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
funziona come previsto come visto here.

Answer 2

DEMO: http://jsfiddle.net/BGKSN/24/

$(document).ready(function(){ 
    $('.format').click(function(){ 
     var highlight = window.getSelection(); 
     var spn = '<span class="highlight">' + highlight + '</span>'; 
     var text = $('.conttext').text(); 
     $('.conttext').html(text.replace(highlight, spn)); 
    }); 
}); 

tardi Edit:

Sulla base del commento, questo è il vero esempio funzionale:

http://jsfiddle.net/BGKSN/40/

$(document).ready(function(){ 
    $('.format').click(function(){ 
     var highlight = window.getSelection(), 
     spn = '<span class="highlight">' + highlight + '</span>', 
     text = $('.conttext').text(), 
     range = highlight.getRangeAt(0), 
     startText = text.substring(0, range.startOffset), 
     endText = text.substring(range.endOffset, text.length); 

     $('.conttext').html(startText + spn + endText); 
    }); 
}); 

Doc.: https://developer.mozilla.org/en-US/docs/Web/API/window.getSelection