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/