7

下面的代码应该用一个跨度包围给定 Div 中突出显示的文本。

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

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

    });
});

这种性质的函数可用于为 HTML 内容可编辑 DIV 提供格式化选项。

显然有些地方是错误的,因为它目前不起作用。

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

4

2 回答 2

11

演示: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));
    });
});

稍后编辑

根据评论,这是真正的功能示例:

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

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

于 2013-07-24T14:24:26.413 回答
0

好吧,首先,你的 html 错了,像这样
<a href="" class="format">test</div>

其次,当您尝试单击测试时,它会取消选择所选文本,因为如果您在选择了某些文本时单击某处,就会发生这种情况。因此,考虑到这一点,我将其更改为,$("body").keypress()以便在按下键时将突出显示的文本包装在 span 中。此外,修复了一些 jQuery 代码,瞧,它可以工作了!

在这里查看。

如果你修复了你的锚标签和你的 jQuery ,那么它$(".contenttext").contents()在哪里.contents()是一个不存在的函数,
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));
它可以按预期工作,如此处所示

于 2013-07-24T14:24:17.733 回答