jQuery Surround markierten Text mit SPAN

Question

Der folgende Code soll den markierten Text in einer bestimmten Div mit einem Span umgeben.

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

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

    }); 
}); 

Eine Funktion dieser Art verwendet werden könnten Formatierungsoptionen zu einer HTML-contenteditable DIV zu liefern.

Etwas ist eindeutig falsch, da es derzeit nicht funktioniert.

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

Answer 1

Nun, zunächst einmal, hatten Sie Ihre HTML falsch, so etwas wie dieses
<a href="" class="format">test</div>

Zweitens, wenn Sie versucht, es zu klicken testen Sie den ausgewählten Text abgewählt, weil das ist, was passiert, wenn Sie klicken irgendwo, wenn Sie etwas Text ausgewählt haben. Also, in diesem Sinne habe ich es in geändert, so wird es den markierten Text in span umhüllen, wenn eine Taste gedrückt wird. Außerdem behoben einige der jQuery-Code und voila, es funktioniert!

Überprüfen Sie es here.

Wenn Sie Ihren Anker-Tag und Ihre jQuery ein bisschen $(".contenttext").contents() beheben, wo .contents() ist eine nicht-existand Funktion
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
es wie erwartet funktioniert wie here gesehen.

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

Später bearbeiten:

Basierend auf den Kommentar, das ist die eigentliche Funktionsbeispiel:

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

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