выделение текста, а затем разделение его на три части с помощью jQuery для AJAX - PullRequest
Новая
       17

выделение текста, а затем разделение его на три части с помощью jQuery для AJAX

2 голосов
/ 29 января 2011

Я хотел бы взять кучу HTML внутри контейнера (DIV), а затем позволить пользователю выбрать его часть. Это не «редактируемая область», которую я ищу. Поскольку мы не хотим, чтобы пользователь мог перезаписывать / изменять текст. Просто отметьте это.

После того, как пользователь выбрал его, я хотел бы знать, что было выбрано, НО также, ГДЕ эта выбранная деталь ЕСТЬ.

Например.

  1. У нас есть список маркеров, и пользователи выбирают маркеры 3 и 4.

  2. У нас есть заголовок1 и три абзаца. Затем пользователь выбирает часть среднего абзаца. Я хотел бы знать, где в этом пункте.

Я немного исследовал, и, насколько я понимаю, у 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>

Проблема в том, что если пользователь выбирает «tempus», он недостаточно хорош, чтобы знать это слово, мне также нужно знать, КАКОЕ из слов (какой абзац / заголовок / элемент маркера).

Причина в том, что мы хотим, чтобы «читатели» могли находить вещи, представляющие интерес / внимание. Иногда целые абзацы, иногда одно слово или заголовок.

Идеальное решение

было бы, если бы мы каким-то образом могли определить, в каком «элементе» (считая сверху я думаю) в DOM выбран. Во-вторых, сколько (начальная и конечная точка) внутри этого конкретного элемента.

Потому что тогда мы могли бы сделать какой-то Ajax обратно в наш ASP.NET, который сообщает бэкэнду, что было помечено, и затем делать то, что когда-либо ...

Я нашел некоторые онлайн-редакторы кода, которые делают BUNCH из вышеперечисленного + намного больше, чем нужно, но полагают, что решение намного проще в этом. Просто не могу найти правильный способ начать работу с решением jQuery.

В надежде на то, что Йода прочитает это. : -)

Ответы [ 2 ]

2 голосов
/ 29 января 2011

Извините, это лишь частичный ответ, он даст вам индексы элементов, в которых выбор начинается и заканчивается во всех браузерах, но смещения начала и конца выбора будут работать только в браузерах Gecko и WebKit.IE поддерживает только объект TextRange, который для меня немного загадочен и труден для работы (ссылка внизу этого ответа имеет пример реализации, охватывающей все браузеры)

Это решениевозвращает индексы элементов, которые содержит выбор (относительно вашего #markable контейнера) и индексы начала и конца выбора (относительно их содержащих узлов).

В этом примере я использую события для захвата элементов, которые содержат выделение (это позволяет обойти браузерные различия), но вы также можете легко сделать это без событий (для Firefox, Opera, Chrome и Safari), так какОбъект Range предоставляет вам anchorNode и focusNode, которые являются узлами DOM, в которых выбор и начало соответственно заканчиваются (более подробная информация здесь 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-position-get-char-offset

1 голос
/ 01 февраля 2011

Вот библиотека кросс-браузер, которая сделает все, что вы хотите для вас http://code.google.com/p/rangy/

...