5

かなり単純なテキスト エディター (太字、斜体、インデント) を作成しようとしていますが、クリック時にボタンに関連付けられたクラスを切り替えることができる必要があります。私はこのコードを持っています:

var selected = function ()
{
  var text = '';
  if (window.getSelection) {
    text = window.getSelection();
  }
  return text;
}

$('textarea').select(function(eventObject)
{
  console.log(selected().toString());
  var selectedtext = selected().toString();
    $('#bold-button').click(function () { 
      $(selectedtext).addClass('bold-text');
    });
});

選択したテキストを印刷することはできますが、クラスを追加することはできません。クリック時にクラスをテキストエリア全体に追加する他のソリューションを見てきましたが、それは必要ありません。何か助けはありますか？

4

2 に答える 2

4

以下のように使用できsurroundContents()ます。ここでのデモの前にhttp://jsfiddle.net/jwRG8/3/

    function surroundSelection() {
        var span = document.createElement("span");
        span.style.fontWeight = "bold";
        span.style.color = "green";

        if (window.getSelection) {
            var sel = window.getSelection();
            if (sel.rangeCount) {
                var range = sel.getRangeAt(0).cloneRange();
                range.surroundContents(span);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    }

ただし、これは IE9 未満ではサポートされていません。そして、以前にテキストの選択に取り組んだことがありますが、一貫性があることがわかりました。Tim Downはセレクションの経験が豊富で、セレクションに関連する SO のほとんどの回答は彼に与えられています。彼は というプラグインを作成しましたrangy。https://code.google.com/p/rangy/で試してみてください

于 2013-10-16T11:21:46.160 に答える
2

テキストを直接選択しているため、クラスを追加する要素はありません。textNodes はクラスを持つことができません。代わりに、要素でテキストをラップしてみてください。

$('textarea').select(function(eventObject) {
    console.log(selected().toString());
    var selectedtext = selected().toString();
    $(selectedtext).wrap('<span />').parent().addClass('bold-text');
})

bまたは、タグなしでタグでラップすることもできますclass:

$(selectedtext).wrap('<b/>');
于 2013-10-16T11:16:16.510 に答える