# annotator-editor

**Repository Path**: china5211/annotator-editor

## Basic Information

- **Project Name**: annotator-editor
- **Description**: 拥有标注功能的富文本，不是一个插件，而是一个应用
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-05-19
- **Last Updated**: 2025-02-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Annotator Editor - 富文本标注编辑器

![Editor Screenshot](screenshot.png) <!-- 可替换为实际截图 -->

基于 Vue 3 构建的现代化富文本标注编辑器，支持本地存储、历史版本管理和 Markdown 格式。

## 主要功能

- 📝 **文章管理**

  - 创建/删除文章
  - 文章标题编辑
  - 自动保存
  - 本地 IndexedDB 存储

- ⏳ **历史版本控制**

  - 自动记录编辑历史
  - 保留最近 100 个版本
  - 撤销/重做操作
  - 版本差异对比

- ✍️ **富文本编辑**

  - 实时预览模式
  - 常用格式工具栏
  - 代码块高亮
  - 列表/引用格式

- 🚀 **其他特性**
  - 响应式布局
  - 拼写检查
  - 键盘快捷键
  - 内容导出

## 技术栈

- **核心框架**: Vue 3 + TypeScript
- **状态管理**: Pinia
- **UI 框架**: Element Plus
- **本地存储**: IndexedDB
- **工具库**: Lodash (防抖/节流)
- **构建工具**: Vite

## 快速开始

### 环境要求

- Node.js v16+
- npm/yarn/pnpm

### 安装步骤

1. 克隆仓库

```bash
git clone https://github.com/yourusername/annotator-editor.git
```

2. 安装依赖

```bash
yarn install
```

3. 运行项目

```bash
yarn dev
```

## 使用说明

1. **创建新文章**

   - 点击侧边栏"新建文章"按钮
   - 输入文章标题（可选）
   - 自动生成唯一文章 ID

2. **编辑内容**

   - 使用工具栏进行格式设置
   - 支持 Markdown 语法
   - 实时自动保存
   - `Ctrl+Z` / `Ctrl+Shift+Z` 撤销重做

3. **历史版本管理**

   - 点击时钟图标查看历史版本
   - 滑动时间轴选择历史版本
   - 支持版本对比和恢复

4. **文章管理**
   - 侧边栏显示所有文章列表
   - 双击标题进行编辑
   - 右键菜单删除文章

## 项目结构

annotator-editor/
├── src/
│ ├── components/ # 组件库
│ ├── stores/ # Pinia 状态管理
│ ├── services/ # 数据服务
│ ├── types/ # TypeScript 类型定义
│ ├── assets/ # 静态资源
│ └── router/ # 路由配置
├── vite.config.ts # Vite 配置
└── package.json

## 贡献指南

欢迎贡献！请遵循以下流程：

1. Fork 本仓库
2. 创建特性分支 (`git checkout -b feature/your-feature`)
3. 提交修改 (`git commit -am 'Add some feature'`)
4. 推送分支 (`git push origin feature/your-feature`)
5. 创建 Pull Request

**代码规范**

- 使用 TypeScript 严格模式
- 组件采用 Composition API
- 重要逻辑需添加单元测试
- 遵循 Element Plus 设计规范

---

**特别感谢**  
[Vue.js](https://vuejs.org/) | [Element Plus](https://element-plus.org/) | [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API)