Question

JSfiddle供参考：https://jsfiddle.net/9jp346r4/20/

我正在尝试创建允许用户在按下按钮时突出显示所选文本的功能，并在右键单击时取消突出显示突出显示的文本。

我已经得到了大部分使用rangy库的工作，除非有一个方案不起作用，我不知道如何解决它。

当我突出显示2个不同段落中的文字时，会突出显示它。

当我想稍后回来并且不突出显示两段时，问题就出现了。

预期的行为是：我右键单击任何突出显示的文本，无论它是否被选中，即使它被段落标记或强标记分隔，它也会取消突出显示所有附近突出显示的文本。< / p>

目前的行为是：它只会取消我点击的段落中的文字。

重新制作： 1）选择与第一段和第二段重叠的文本，然后按＆＃34;按＆＃34;按钮。

2）通过单击屏幕上的其他位置取消选择所选文本。

3）右键单击任何突出显示的文本。请注意，其中一个段落未突出显示。

如果不清楚，请随时提问。非常感谢帮助。

这是我的HTML：

<div id="content">
<p>
Paragraph 1
</p>
<p>
Paragraph 2
</p>
</div>
<div id="divId">
   <input id="myBtn" type="button" value="Press" onclick = "javascript:toggleItalicYellowBg()"/>
</div>

这是我的javascript：

function coverAll() {
  var ranges = [];
  for(var i=0; i<window.getSelection().rangeCount; i++) {
    var range = window.getSelection().getRangeAt(i);
    while(range.startContainer.nodeType == 3
          || range.startContainer.childNodes.length == 1)
      range.setStartBefore(range.startContainer);
    while(range.endContainer.nodeType == 3
          || range.endContainer.childNodes.length == 1)
      range.setEndAfter(range.endContainer);
    ranges.push(range);
  }
  window.getSelection().removeAllRanges();
  for(var i=0; i<ranges.length; i++) {
    window.getSelection().addRange(ranges[i]);
  }
  return true;
}

function getSelectedText() {
  if (window.getSelection) {
    return window.getSelection().toString();
  } else if (document.selection) {
    return document.selection.createRange().text;
  }
  return '';
}

var italicYellowBgApplier;

function toggleItalicYellowBg() {
  italicYellowBgApplier.toggleSelection();
}

window.onload = function() {
  $(document).on("contextmenu", ".italicYellowBg", function(e){
    if(coverAll()) {
      italicYellowBgApplier.undoToSelection();
      return false;
    }
  });
  rangy.init();


  // Enable buttons
  var classApplierModule = rangy.modules.ClassApplier;

  // Next line is pure paranoia: it will only return false if the browser has no support for ranges,
  // selections or TextRanges. Even IE 5 would pass this test.
  if (rangy.supported && classApplierModule && classApplierModule.supported) {

    italicYellowBgApplier = rangy.createClassApplier("italicYellowBg",       {
      tagNames: ["span", "a", "b", "img"]
    });
  }
};

Answer 1

我想可以轻松解决此问题，在内存中保留用户突出显示数组，该数组中的一项不是单个突出显示项，而是另一个“在突出显示期间选择选定项”，当有人单击右键时在突出显示的单个片段上，内存可从数组中查找所有关联的突出显示，并自行取消突出显示相关的片段。

无法使用Rangy库

1 个答案: