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 contenteditable 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()、キーが押されたときに強調表示されたテキストをスパンでラップするように変更しました。また、jQuery コードの一部を修正すると、出来上がりです。

ここでチェックしてください。

アンカー タグと jQuery が存在しない関数を少し修正すると、$(".contenttext").contents()ここ に見られるように期待どおりに機能します。.contents()
$(".contenttext").html($(".contenttext").html().replace(highlight, spn));

于 2013-07-24T14:24:17.733 に答える