jQuery包圍帶有span標簽的所選文本和圖像

Question

我想在jquery中用span標簽包圍所選文本和圖像或具有多個標簽的文本。 我如何實現這一目標，我已經看到了許多類似下面的jsfiddle代碼的示例。 所有示例僅使用文本完成，但是現在希望使用span標簽將文本和圖像都包圍起來。 提前致謝

$(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

更改您的代碼以使用范圍的surroundContents方法 。

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

    range.surroundContents(spn);
});

演示位於http://jsfiddle.net/gaby/BGKSN/181
帶有圖片的演示位於http://jsfiddle.net/gaby/BGKSN/182/