在PDF.js文本层使用Rangy时，部分文本高亮后其余内容无法选中的问题

我使用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;
}

问题现象 #

高亮后的span元素布局异常，"copies are not made or distributed"这段文本超出了span范围，且该部分文本无法被选中。

解决方案 #

1. 移除重复的Rangy初始化 #

每次调用applyHighlight()都执行rangy.init()会重置Rangy状态，破坏DOM选区处理逻辑。将初始化代码移到函数外部，仅执行一次：

// 在组件初始化或全局作用域执行一次
rangy.init();

applyHighlight() {
   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();
}}

2. 调整CSS避免布局偏移 #

高亮类中的margin: -1px和padding: 1px会干扰文本流连续性，导致DOM元素偏移。改用box-shadow替代，不影响布局：

.highlight-yellow {
  background-color: rgb(252, 238, 124);
  border-radius: 4px;
  opacity: 0.5;
  cursor: pointer;
  /* 用box-shadow模拟边框效果，避免布局偏移 */
  box-shadow: 0 0 0 1px transparent;
}

3. 复用Highlighter实例 #

频繁创建新的Highlighter实例会增加DOM操作开销，建议复用同一实例：

rangy.init();
// 全局或组件内创建一次Highlighter
const highlighter = rangy.createHighlighter();
highlighter.addClassApplier(rangy.createClassApplier('highlight-yellow'));

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

4. 检查目标容器的DOM结构 #

确保高亮文本所在的容器是合法的HTML结构，避免块级元素嵌套在行内元素等异常情况，这类问题会导致Rangy拆分DOM时出现错误。

内容的提问来源于stack exchange，提问作者f-accu