# editor-test

**Repository Path**: zhangxuelian/editor-test

## Basic Information

- **Project Name**: editor-test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-29
- **Last Updated**: 2026-01-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vue3 Quill 批注功能示例

这是一个基于 Vue3 和 Quill.js 实现的富文本编辑器，支持批注/注释功能。

## 功能特性

✅ **完整的批注功能**
1. 新增批注菜单（工具栏中的💬按钮）
2. 选中编辑器内容，点击批注按钮添加批注
3. 弹出弹窗输入批注内容，确定后高亮选中内容
4. 将编辑器内容和批注内容一起保存
5. 重新打开编辑器，自动渲染编辑器内容和批注
6. 点击批注列表的批注，高亮并定位到对应内容

## 安装依赖

```bash
npm install
```

## 运行项目

```bash
npm run dev
```

## 使用说明

### 添加批注
1. 在编辑器中选中要批注的文字
2. 点击工具栏的💬按钮（批注按钮）
3. 在弹出的对话框中输入批注内容
4. 点击确定按钮，批注完成

### 查看批注
- 右侧面板显示所有批注列表
- 批注的文本会以黄色背景和橙色虚线边框高亮显示

### 定位批注
- 点击批注列表中的任一批注
- 编辑器会自动滚动到对应位置并高亮选中

### 编辑批注
- 点击批注项右侧的✏️按钮
- 修改批注内容后保存

### 删除批注
- 点击批注项右侧的🗑️按钮
- 批注会被删除，高亮样式也会移除

### 保存和加载文档
- 点击"保存文档"按钮将内容和批注保存到 localStorage
- 点击"加载文档"按钮从 localStorage 恢复内容

## 技术实现

### 自定义 Annotation Blot
```javascript
class AnnotationBlot extends Inline {
  static blotName = 'annotation'
  static tagName = 'span'
  static className = 'ql-annotation'

  static create(value) {
    const node = super.create()
    node.setAttribute('data-annotation-id', value.id)
    node.classList.add('ql-annotation')
    return node
  }

  static value(node) {
    return {
      id: node.getAttribute('data-annotation-id')
    }
  }
}

// 注册自定义 Blot
Quill.register(AnnotationBlot, true)
```

### 数据结构
```javascript
{
  id: "批注ID",
  index: 10,        // 选区起始位置
  length: 5,        // 选区长度
  text: "批注内容", // 批注文本
  selectedText: "被批注的文本",
  timestamp: 1234567890
}
```

### 保存数据格式
```javascript
{
  content: "编辑器的HTML内容",
  annotations: [...], // 批注数组
  timestamp: 1234567890
}
```

## 样式定制

批注的高亮样式通过 CSS 自定义：
```css
.ql-annotation {
  background-color: #fffacd;
  border-bottom: 2px dashed #ffa500;
  cursor: pointer;
  padding: 2px 0;
  transition: all 0.2s ease;
}

.ql-annotation.active {
  background-color: #87ceeb;
  border-bottom: 2px solid #4169e1;
}
```

## 技术栈

- Vue 3.4+
- @vueup/vue-quill 1.2+
- Quill 1.3+
- Vite 5.0+

## 注意事项

- 当前示例使用 localStorage 存储数据，实际项目应该使用后端数据库
- 批注位置基于字符索引，编辑器内容修改后可能导致位置不准确
- 建议在生产环境添加更多的错误处理和边界情况处理

## 扩展建议

1. **后端集成**: 将数据保存到数据库，支持多人协作
2. **权限控制**: 不同用户只能看到自己的批注
3. **批注回复**: 支持对批注进行回复和讨论
4. **批注搜索**: 支持按关键词搜索批注
5. **导出功能**: 支持导出为 Word 或 PDF，保留批注
6. **版本历史**: 保存编辑历史和批注历史