当前位置：首页 > JavaScript

js实现批注

2026-01-31 20:13:28JavaScript

实现批注的基本思路

在JavaScript中实现批注功能通常涉及以下核心步骤：监听用户选中的文本、创建批注容器、保存批注内容以及与后端交互（如果需要持久化存储）。

// 监听文本选择事件
document.addEventListener('mouseup', function() {
    const selection = window.getSelection();
    if (!selection.isCollapsed) {
        showAnnotationTooltip(selection);
    }
});

// 显示批注工具提示
function showAnnotationTooltip(selection) {
    const tooltip = document.createElement('div');
    tooltip.className = 'annotation-tooltip';
    tooltip.innerHTML = '<textarea placeholder="输入批注..."></textarea><button>保存</button>';

    const range = selection.getRangeAt(0);
    const rect = range.getBoundingClientRect();
    tooltip.style.position = 'absolute';
    tooltip.style.top = `${rect.bottom + window.scrollY}px`;
    tooltip.style.left = `${rect.left + window.scrollX}px`;

    document.body.appendChild(tooltip);

    tooltip.querySelector('button').addEventListener('click', function() {
        saveAnnotation(selection, tooltip.querySelector('textarea').value);
        tooltip.remove();
    });
}

批注数据存储结构

批注数据通常需要记录选中文本的位置、内容和用户信息。可以使用以下数据结构：

{
    id: 'unique-id',
    text: '选中的文本内容',
    annotation: '用户批注内容',
    startOffset: 12,  // 在父节点中的起始位置
    endOffset: 20,    // 在父节点中的结束位置
    path: 'body>div.main>p:first-child',  // DOM路径
    createdAt: '2023-06-01T10:00:00Z'
}

高亮显示批注文本

保存批注后通常需要高亮显示被批注的文本：

function highlightAnnotatedText(range, annotationId) {
    const span = document.createElement('span');
    span.className = 'annotation-highlight';
    span.dataset.annotationId = annotationId;
    range.surroundContents(span);
}

// CSS样式示例
.annotation-highlight {
    background-color: #ffeb3b;
    cursor: pointer;
}

完整实现示例

以下是一个完整的批注系统实现框架：

js实现批注

class AnnotationSystem {
    constructor() {
        this.annotations = [];
        document.addEventListener('mouseup', this.handleSelection.bind(this));
    }

    handleSelection() {
        const selection = window.getSelection();
        if (selection.isCollapsed) return;

        this.showTooltip(selection);
    }

    showTooltip(selection) {
        // 工具提示UI实现
    }

    saveAnnotation(selection, comment) {
        const range = selection.getRangeAt(0);
        const annotation = {
            id: generateId(),
            text: selection.toString(),
            comment,
            range: this.serializeRange(range)
        };

        this.annotations.push(annotation);
        this.highlightRange(range, annotation.id);
    }

    serializeRange(range) {
        // 将Range对象转换为可存储的数据
    }

    highlightRange(range, id) {
        // 高亮显示选中的文本范围
    }
}