Question

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

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

＆＃13;

<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>

＆＃13;

用例1 =＆gt;用户仅从第一个跨度中选择了测试＆＃34; 流行信念，Lorem ＆＃34;然后突出显示的html应为 -

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

用例2 =＆gt;如果从两个或多个跨度（第一个和第二个）中选择＆＃34; 随机文本。它有根源＆＃34;然后结果突出显示的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 - ＆＃34; senetence＆＃34;的父标记内的多个子元素中选择一些文本。那么只需要突出显示那个父标签。即用户选择＆＃34; 坐下来......，来＆＃34;那么结果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;
}

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

1 个答案: