如何将Rangy与PDFjs文本图层一起使用？

Question

我正在使用Rangy库选择文本并对其应用突出显示类，问题是何时选择部分文本，其余部分变得不可选择！

我的亮点功能：

  applyHighlight() {
   rangy.init()
   let selection = rangy.getSelection();
   if (selection.rangeCount > 0) {
   let highlighter = rangy.createHighlighter();
   highlighter.addClassApplier(rangy.createClassApplier('highlight-yellow'));
   highlighter.highlightSelection('highlight-yellow');
   rangy.getSelection().removeAllRanges();
}}

CSS类

 .highlight-yellow {
  margin: -1px !important;
  padding: 1px !important;
  background-color: rgb(252, 238, 124) !important;
  border-radius: 4px !important;
  opacity: 50%;
  cursor: pointer;}

描述问题的屏幕截图..

这是突出显示的跨度

这就是控制台上的样子

如您所见，“未制作或分发副本”部分变得不可选择，并且超出了跨度范围。

Answer 1

您可能需要修改突出显示功能以更有效地处理部分选择。

applyHighlight() {
   rangy.init();
   let selection = rangy.getSelection();
   if (selection.rangeCount > 0) {
       let highlighter = rangy.createHighlighter();
       highlighter.addClassApplier(rangy.createClassApplier('highlight-yellow'));
       
       // Iterate over each range in the selection
       for (let i = 0; i < selection.rangeCount; i++) {
           let range = selection.getRangeAt(i);
           // Create a highlight for each range
           highlighter.highlightRanges('highlight-yellow', [range]);
       }
       
       rangy.getSelection().removeAllRanges();
   }
}