jQuery包围带有span标签的所选文本和图像

Question

I want to surround selected text and image or texts with multiple tags with span tag in jquery. How can i achieve that, I have seen many examples like the below jsfiddle code. All the examples are done only with text, but now want to surround both text and image with span tag. Thanks in advance

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

JSFiddle

Answer 1

Change your code to use the surroundContents method of the range.

$('.format').click(function () {
    var highlight = window.getSelection(),
        spn = $('<span class="highlight" />')[0],
        range = highlight.getRangeAt(0);

    range.surroundContents(spn);
});

Demo at http://jsfiddle.net/gaby/BGKSN/181
Demo with image at http://jsfiddle.net/gaby/BGKSN/182/