使用Rangy库突出显示特定的父节点

Question

我正在使用Rangy库来突出显示文本。当我使用下面的代码时，如果没有标签，并且在跨度标签之间选择整个文本，只需使用highlighter.highlightSelection("note");将该类别指定给现有标签，就可以简单地为类标注添加跨度标签。

现在我的要求是，而不是突出显示选定的文本，我需要突出显示其父节点的整个文本。正如你在下面的代码片段中看到的那样，我有一个带有s级句子的span标签，它又是由一个或多个子标签构成的。现在我想，如果用户从子范围标签中选择一些文本，而不是带有属性s-class =句子的父标签，则应该高亮显示。如果用户尝试在多个父跨度标签中选择文本，则应突出显示受此选择影响的所有父标签。

<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应该是测试 -

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

使用情况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”则只有父标记需要强调。即用户选择“坐阿梅德..，来自”然后将得到的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; 
}