2

コンテナー (DIV) 内に大量の HTML を取り、ユーザーにその一部を選択させたいと思います。私が探しているのは「編集可能な領域」ではありません。ユーザーがテキストを上書き/変更できるようにしたくないためです。マークするだけです。

ユーザーが選択した後、何が選択されたかを知りたいのですが、選択した部分がどこにあるのかも知りたいです。

例えば。

  1. 箇条書きリストがあり、ユーザーは箇条書き 3 と 4 を選択します。

  2. いくつかの見出し 1 と 3 つの段落があります。次に、ユーザーは中間段落の一部を選択します。その段落のどこを知りたいです。

私は少し調査しましたが、選択の startPos と endPos に関しては、MSIE が選択に問題があることを理解しています。

次に、マークされたテキストがコンテナ全体の中に複数回ある場合はどうなるでしょうか?

以下に例を示します。

<div id="markable">

   <h1>Here is a nice headline</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
      tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
      neque, tempus iaculis sapien consectetur id.</p>

  <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
     Curae; Quisque fringilla massa id libero commodo venenatis.</p>

  <ol>
     <li>here is a bullet line #1</li>
     <li>here is a bullet line #2</li>
     <li>here is a bullet line #3</li>
     <li>here is a bullet line #4</li>
     <li>here is a bullet line #5</li>
     <li>here is a bullet line #6</li>
  </ol>

  <h2>here is a sub-headline</h2>

  <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
     Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
     per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
     malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
     consequat.</p>

</div>

問題は、ユーザーが「テンポス」を選択した場合、単語を知るのに十分ではなく、どの単語 (どの段落/見出し/箇条書き要素) であるかを知る必要があることです。

その理由は、「読者」が興味/注意を引くことができるようにしたいからです. 段落全体の場合もあれば、1 つの単語や見出しだけの場合もあります。

完璧なソリューション

選択されているDOMのどの「要素」（上から数えて）を何らかの形で検出できればよいでしょう。次に、その特定の要素内の量 (開始点と終了点)。

それから、何らかの Ajax を ASP.NET に戻して、バックエンドに何がマークされているかを伝え、それから何をしてもよいからです...

上記の機能を必要以上に多く実行するオンライン コード エディタをいくつか見つけましたが、このエディタのソリューションははるかに簡単だと思います。jQuery ソリューションを使い始める適切な方法が見つかりません。

jQuery Yoda がこれを読んでくれることを願って。:-)

4

2 に答える 2

2

申し訳ありませんが、これは部分的な回答にすぎません。これにより、すべてのブラウザーで選択が開始および終了する要素のインデックスが得られますが、選択の開始と終了のオフセットは Gecko および WebKit ブラウザーでのみ機能します。IE は TextRange オブジェクトのみをサポートしていますが、これは私にとって少し謎であり、操作するのが少し面倒です (この回答の下部にあるリンクには、すべてのブラウザーをカバーする実装の例があります)。

このソリューションは、選択に含まれる要素のインデックス (#markable コンテナーに関連して) と、開始および終了選択のインデックス (それらを含むノードに関連) を返します。

この例では、選択を含む要素をキャプチャするためにイベントを使用しています (これはブラウザの違いを回避します) が、Range オブジェクトが anchorNode とそれぞれ選択が開始および終了する DOM ノードである focusNode (詳細はこちらhttp://www.quirksmode.org/dom/range_intro.html )

<html>
<head>

  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  <script>

  var end;
  var start;

  indexes = new Array();
var endIndex;
  var startIndex;
  $(document).ready(function(){


$("#markable").mouseup(function(event){
end = event.target;

indexes.push($("*", "#markable").index($(end)));
//normalize start and end just in case someone selects 'backwards' 
indexes.sort(sortASC);




event.stopPropagation()
})

$("#markable").mousedown(function(event){
indexes.length=0;
start = event.target;
event.stopPropagation()
indexes.push($("*", "#markable").index($(start)));
})

$(".button").click(function(){

sel = getSel();

alert("Index of the element selection starts in (relative to #markable): "+indexes[0] +"\n" + 
"Index of the of the beginning of selection in the start node: "+ sel.anchorOffset+"\n" + 
"Index of the element selection ends in  (relative to #markable): "+ indexes[1]+"\n"+ 
"Index of the of the end of selection in the end node: "+ sel.focusOffset)

})

  })




function sortASC(a, b){ return (a-b); }
function sortDESC(a, b){ return (b-a); }

function getSel()
{
    var txt = '';
     if (window.getSelection)
    {
        txt = window.getSelection();
             }
    else if (document.getSelection)
    {
        txt = document.getSelection();
            }

    else if (document.selection)
    {
        txt = document.selection.createRange();
            }
    else return;
return txt;
}
</script>

</head>
<body>
<div id="markable">

   <h1>Here is a nice headline</h1>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque non
      tempor metus. Ut malesuada posuere nunc eu venenatis. Donec sagittis tempus
      neque, tempus iaculis sapien consectetur id.</p>

  <p>Nulla tempus porttitor pellentesque. Curabitur cursus dictum felis quis tempus.
     Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
     Curae; Quisque fringilla massa id libero commodo venenatis.</p>

  <ol>
     <li>here is a bullet line #1</li>
     <li>here is a bullet line #2</li>
     <li>here is a bullet line #3</li>
     <li>here is a bullet line #4</li>
     <li>here is a bullet line #5</li>
     <li>here is a bullet line #6</li>
  </ol>

  <h2>here is a sub-headline</h2>

  <p>Aenean auctor fringilla dolor. Aenean pulvinar tortor sed lacus auctor cursus.
     Sed sit amet imperdiet massa. Class aptent taciti sociosqu ad litora torquent
     per conubia nostra, per inceptos himenaeos. Fusce lectus neque, rhoncus et
     malesuada at, blandit at risus. Vivamus rhoncus ante vel erat mollis 
     consequat.</p>

</div>
<input type=button class=button value="Get selection data">


</body>
</html>

そして、ここにクロスブラウザソリューションの詳細を提供するリンクがあります（例2までスクロールダウン） http://help.dottoro.com/ljjmnrqr.php

編集: IE の場合、document.body.createTextRange() を使用してテキスト範囲を取得する必要があります。anchorOffset に相当するものを取得する方法はまだわかりませんが、次のリンクが役立つかもしれません: http://bytes.com/topic/javascript/answers/629503-ie-selection-range-set-range-start-click-位置取得文字オフセット

于 2011-01-29T12:33:15.657 に答える
1

これは、あなたが望むすべてを行うクロスブラウザライブラリです http://code.google.com/p/rangy/

于 2011-02-01T09:47:18.993 に答える