Rangyライブラリを使用して特定の親ノードを強調表示します

Question

テキストを強調表示するためにRangyライブラリを使用しています。次のコードを使用すると、タグがなくてもスパンタグの間にテキスト全体を選択している間は、クラスノートでスパンタグを追加するだけで、単にそのクラスを既存のタグに割り当てます（highlighter.highlightSelection("note");）。

私の要件は、選択したテキストを強調表示するのではなく、親ノードのテキスト全体を強調表示する必要があります。次のスニペットでわかるように、私は、1つまたは複数の子スパンタグを使用して作られたsクラスの文を持つスパンタグを持っています。今私は、属性s-class = sentenceを持つ親タグが強調表示されるよりも、ユーザーが子スパンタグから何らかのテキストを選択したければ、ユーザーが複数の親スパンタグ全体でテキストを選択しようとすると、この選択の影響を受けるすべての親タグを強調表示する必要があります。

<span s-class="sentence" class="note"> 
<span>Contrary to popular belief, Lorem Ipsum is not simply random text. </span> 
</span> 

使用 -

<p> 
 
<span s-class="sentence"> 
 
<span>Contrary to popular belief, Lorem Ipsum is not simply random text. </span> 
 
</span> 
 
<span s-class="sentence"> 
 
<span>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </span> 
 
</span> 
 
<span s-class="sentence"> 
 
<span>Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. </span> 
 
</span> 
 
<span s-class="sentence"> 
 
<span>Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. </span> 
 
</span> 
 
<span s-class="sentence"> 
 
<span>This book is a treatise on the theory of ethics, very popular during the Renaissance. </span></span> 
 
<span s-class="sentence"> 
 
<span>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.."</span><span >, comes from a line in section 1.10.32.</span> 
 
</span> 
 
</p>

ユースケース1 =>ユーザーは、最初のスパンのみ "人気の信念、Loremの"、そしてハイライトされたHTMLがなければなりませんからテストを選択しましたcase 2 => 2つ以上のスパン（1番目と2番目）から "ランダムなテキストが選択されていますが、それにはルートがあります"の場合、強調表示されたhtmlは -

<span s-class="sentence" class="note"> 
<span>Contrary to popular belief, Lorem Ipsum is not simply random text. </span> 
</span> 
<span s-class="sentence" class="note"> 
<span>It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. </span> 
</span> 

ユースケース3 - ユーザー属性のsクラス - 「senetence」との親タグ内に複数の子要素間でいくつかのテキストを選択した場合のみ、その親タグを強調表示する必要があります。すなわち、ユーザが「AMET座る..が来る」を選択した後、結果として得られるHTMLはする必要があります -

<span s-class="sentence" class="note"> 
<span>The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet.."</span><span >, comes from a line in section 1.10.32.</span> 
</span> 

私は、Word文書からこのHTMLに変換してから、私は、影響を受けるすべての文章を選択したいので、文章を作っています強調表示されたテキストだけでなく、選択によって。

また、ハイライトを解除すると、これらの親スパンから選択を削除する必要があります。

Answer 1

これはうまくいくはずです。

var selection = rangy.getSelection(); 
     if (selection.rangeCount > 0) { 
      var range = selection.getRangeAt(0); 
      var startNode = $(range.startContainer).closest("span[s-class=sentence]"); 
      var endNode = $(range.endContainer).closest("span[s-class=sentence]"); 
      $(startNode).addClass("selectionstart"); 
      $(endNode).addClass("selectionend"); 
      var rangeSel = $('span').rangeSelector(); 
      if(rangeSel!==undefined && rangeSel.length>0){ 
       $(startNode).addClass('note'); 
       $(endNode).addClass('note'); 
       rangeSel.addClass("note"); 
}} 
//jquery extension method 
$.fn.rangeSelector = function (options) { 
    var settings = $.extend({ startClass: 'selectionstart', endClass: 'selectionend' }, options || {}); 
    var name = 'span'; 
    var startNode = name + '.' + settings.startClass; 
    var endNode = name + '.' + settings.endClass; 
    var parentNode = $(startNode).parent().closest("p"); 
    var startIndex = parentNode.find(startNode).index(); 
    var endIndex = parentNode.find(endNode).index(); 
    if ((startIndex === endIndex) || (endIndex === startIndex+1)) 
     return $('<span />'); 
    if (endIndex < 0) 
     return undefined; 
    var result = $(startNode).nextUntil(endNode); 
    return result; 
}