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

Question

我正在使用Rangy库来突出显示文本。当我使用以下代码时，如果没有标签，它只需添加一个带有类注释的 span 标签，当我在 span 标签之间选择整个文本时，它只需使用highlighter.highlightSelection("note");将该类分配给现有标签。

现在我的要求是，我需要突出显示其父节点的整个文本，而不是突出显示所选文本。正如您在以下代码片段中看到的，我有一个带有 s 类句子的 span 标签，该标签再次由使用一个或多个子 span 标签组成。现在我想要，如果用户从子跨度标签中选择一些文本，则应突出显示具有属性 s-class=sentence 的父标签。如果用户尝试在多个父范围标签中选择文本，则应突出显示受此选择影响的所有父标签。

<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-class-"senetence" 的父标签内的多个子元素中选择一些文本，则只需要突出显示该父标签。 即用户选择">sit amet..， comes"，那么生成的 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;
}