1

html要素内のテキスト選択を取得し、その周りにスパンタグを挿入しようとしています。これまでのところ、正しいインデックスに問題があります。ブロック内のテキストを強調表示すると、タグ<p>の後にインデックスが0になります。<br>テキストをslice（）して、テキストを強調表示した後、選択したテキストを取得してAjax経由でサーバーに送信した後、スパンタグと再結合できるようにしたいと思います。

HTMLとコードのサンプルを次に示します。

<html><body><p>This is some sample text.<br>Select this text.</p></body></html>

jQuery：

$('*').mouseup(function() {
    mouseDown = false;

    var startIndex = window.getSelection().getRangeAt(0).startOffset;
    var endIndex = window.getSelection().getRangeAt(0).endOffset;
    alert($(body *).text().slice(startIndex, endIndex));
});
4

2 に答える 2

2

jsfiddleでコードを確認しましたが、問題はjavascriptが「highlightedElement」が何であるかを知らなかったため、jsfiddleで少しデモをモックアップしたことです。

少し壊れやすいですが、必要なことを実行する必要があります：http: //jsfiddle.net/WRrH9/5/

何らかの理由で機能しない場合は、コードを変更します。

HTML：

<html>
    <head>
    </head>
    <body>
        <p>This is some sample text.Select this text.
        </p>
    </body>
</html>​

JavaScript：

$('body *').mouseup(function() {
    mouseDown=false;
    var startIndex = window.getSelection().getRangeAt(0).startOffset;
    var endIndex = window.getSelection().getRangeAt(0).endOffset;
    var slicedText = $(this).text().slice(startIndex, endIndex);
    $(this).html($(this).text().replace(slicedText,'<span>' + slicedText + '</span>'));
});​

お役に立てれば！

于 2012-06-23T18:47:40.453 に答える
1

範囲境界オフセットは、範囲境界を含む最も内側のノードを基準にしているため、一般的なケースでは、試行しているものは機能しません。

あなたは経由で利用可能なコマンドの1つがdocument.execCommand()仕事をするのを見つけるかもしれません。これに失敗すると、改行などの書式設定を維持する場合、<span>タグ内の選択範囲内のすべてのテキストノードを囲む必要があるため、これは簡単な作業ではありません。スパンに特定のCSSクラスがある場合は、 RangyライブラリのCSSクラスアプライヤーモジュールを使用できる可能性があります。

于 2012-06-24T14:30:45.653 に答える