Angular鼠标选中文本高亮功能Firefox兼容问题求助

• 实现鼠标选中文本后高亮、可取消高亮的功能，文本来自后端，包含多个HTML标签，以innerHTML形式插入组件
• 采用document.execCommand('HiliteColor', false, "yellow")方案可跨段落和span处理高亮，但Firefox中表现不符合预期

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  constructor() {
    document.onmouseup = () => {
      this.onSelectEventHandler();
    };
  }

  private onSelectEventHandler(): void {
    const selection = window.getSelection();
    if (selection && selection.type == 'Range') {
      const range = selection.getRangeAt(0);
      if (range) {
        if (this.isSelected()) {
          this.setColorToRange('unset');
        }
        else {
          this.setColorToRange('yellow');
        }
      }
    }
    selection.empty();
  }

  private isSelected(): boolean {
    //temp
    return false;
  }

  private setColorToRange(color: string): void {
    document.designMode = 'on';
    if (!document.execCommand('HiliteColor', false, color)) {
      document.execCommand('BackColor', false, color);
    }
    document.designMode = 'off';
  }
}

方案1：使用原生Selection/Range API手动操作DOM（推荐，跨浏览器兼容） #

document.execCommand已被标记为废弃，改用原生API直接操作<mark>标签实现高亮，兼容性更好且逻辑可控：

实现步骤 #

1. 在模板中给内容容器添加模板引用变量：

<div #contentContainer [innerHTML]="backendContent"></div>

2. 修改组件代码：

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('contentContainer') contentContainer!: ElementRef;
  // 假设backendContent是从后端获取的HTML文本
  backendContent = '<p>示例文本<span>带标签</span>的内容</p>';

  constructor() {
    document.onmouseup = () => this.handleSelection();
  }

  private handleSelection(): void {
    const selection = window.getSelection();
    if (!selection || selection.type !== 'Range' || selection.isCollapsed) return;

    const range = selection.getRangeAt(0);
    const isHighlighted = this.isRangeHighlighted(range);

    isHighlighted ? this.removeHighlight(range) : this.addHighlight(range);
    selection.empty();
  }

  // 检查选中范围是否已存在高亮
  private isRangeHighlighted(range: Range): boolean {
    const ancestor = range.commonAncestorContainer as HTMLElement;
    return Array.from(ancestor.querySelectorAll('mark')).some(mark => {
      const markRange = document.createRange();
      markRange.selectNodeContents(mark);
      return range.intersectsNode(mark);
    });
  }

  // 给选中范围添加高亮
  private addHighlight(range: Range): void {
    const mark = document.createElement('mark');
    // 自定义高亮样式，统一浏览器表现
    mark.style.backgroundColor = 'yellow';
    mark.style.color = 'inherit';
    mark.style.padding = '0';

    try {
      range.surroundContents(mark);
    } catch (e) {
      // 处理跨节点选中的情况
      const fragment = range.extractContents();
      mark.appendChild(fragment);
      range.insertNode(mark);
    }
  }

  // 移除选中范围的高亮
  private removeHighlight(range: Range): void {
    const markElements = Array.from(this.contentContainer.nativeElement.querySelectorAll('mark'));
    
    markElements.forEach(mark => {
      const markRange = document.createRange();
      markRange.selectNodeContents(mark);
      if (range.intersectsNode(mark)) {
        const parent = mark.parentNode;
        while (mark.firstChild) {
          parent?.insertBefore(mark.firstChild, mark);
        }
        parent?.removeChild(mark);
      }
    });
  }
}

方案2：修复Firefox下execCommand的兼容问题 #

如果坚持使用execCommand，可针对Firefox的特性调整代码：

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('contentContainer') contentContainer!: ElementRef;

  constructor() {
    document.onmouseup = () => this.onSelectEventHandler();
  }

  private onSelectEventHandler(): void {
    const selection = window.getSelection();
    if (selection && selection.type == 'Range') {
      const range = selection.getRangeAt(0);
      if (range) {
        const isHighlighted = this.isSelected();
        this.setColorToRange(isHighlighted ? 'transparent' : 'yellow');
      }
    }
    selection.empty();
  }

  private isSelected(): boolean {
    // 实现检查选中内容是否已高亮的逻辑
    const selection = window.getSelection();
    if (!selection) return false;
    const range = selection.getRangeAt(0);
    const ancestor = range.commonAncestorContainer as HTMLElement;
    return ancestor.querySelector('span[style*="background-color: yellow"]') !== null;
  }

  private setColorToRange(color: string): void {
    const contentEl = this.contentContainer.nativeElement;
    contentEl.focus(); // Firefox需要先聚焦内容容器
    document.designMode = 'on';

    // Firefox下移除高亮需设置为transparent而非unset
    document.execCommand('HiliteColor', false, color);
    
    document.designMode = 'off';
    contentEl.blur();
  }
}

关键注意事项 #

• 优先使用方案1，因为execCommand已被废弃，后续浏览器可能移除支持
• 自定义高亮样式避免依赖浏览器默认的<mark>或HiliteColor样式
• 处理跨多个DOM节点的选中场景，防止DOM结构被破坏

内容的提问来源于stack exchange，提问作者Jake