# doc-editor-ui

**Repository Path**: xtfge0915/eoc-editor-ui

## Basic Information

- **Project Name**: doc-editor-ui
- **Description**: Doc Editor UI 是一个基于 Vue 3 和 Quill.js 的富文本编辑器前端项目，提供了协作编辑、版本历史、批注等功能，为用户提供了一个功能强大的在线文档编辑体验
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2026-02-09
- **Last Updated**: 2026-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Doc Editor UI

## 项目简介

Doc Editor UI 是一个基于 Vue 3 和 Quill.js 的富文本编辑器前端项目，提供了协作编辑、版本历史、批注等功能，为用户提供了一个功能强大的在线文档编辑体验。

## 功能特性

- **富文本编辑**：支持文本格式化、字体样式、段落对齐等基本编辑功能
- **协作编辑**：基于 Yjs 实现的实时协作编辑，支持多人同时编辑文档
- **版本历史**：自动保存文档快照，支持查看历史版本和版本对比
- **批注功能**：支持在文档中添加批注和评论
- **用户管理**：支持文档共享和权限管理
- **导出功能**：支持导出文档为不同格式
- **待办事项**：支持创建和管理待办事项列表
- **代码块**：支持代码高亮显示

## 技术栈

- **前端框架**：Vue 3 + Vite
- **编辑器**：Quill.js 2.0
- **协作编辑**：Yjs + y-websocket
- **UI组件**：Element Plus
- **样式**：原生 CSS
- **测试**：Vitest

## 安装和运行

### 前置条件

- Node.js 14.0 或更高版本
- yarn 或 npm 包管理器

### 安装依赖

```bash
yarn install
# 或
npm install
```

### 开发模式运行

```bash
yarn dev
# 或
npm run dev
```

### 构建生产版本

```bash
yarn build
# 或
npm run build
```

### 预览生产版本

```bash
yarn preview
# 或
npm run preview
```

## 项目结构

```
doc-editor-ui/
├── public/              # 静态资源
├── src/                # 源代码
│   ├── api/            # API 调用
│   ├── assets/         # 静态资源
│   ├── components/      # 组件
│   ├── composables/     # 组合式函数
│   ├── constants/       # 常量
│   ├── quill-extend/    # Quill 扩展
│   ├── tests/           # 测试文件
│   ├── App.vue          # 应用入口组件
│   ├── config.js        # 配置文件
│   ├── main.js          # 应用入口文件
│   └── style.css        # 全局样式
├── .gitignore           # Git 忽略文件
├── index.html           # HTML 模板
├── package.json         # 项目配置
├── vite.config.js       # Vite 配置
└── vitest.config.js     # Vitest 配置
```

## 主要组件和功能

### 核心组件

- **EditorHeader**：编辑器顶部导航栏，包含历史、批注、导出等功能按钮
- **EditorToolbar**：编辑工具栏，提供文本格式化等功能
- **Document**：文档编辑区域，包含 Quill 编辑器实例
- **AnnotationList**：批注列表组件
- **VersionHistory**：版本历史组件
- **UserList**：用户列表组件

### 主要功能模块

#### 1. 编辑器核心 (useEditor.js)
- 初始化 Quill 编辑器
- 配置编辑器模块和扩展
- 处理编辑器事件

#### 2. 文档管理 (useDocument.js)
- 文档加载和保存
- 历史面板管理
- 批注面板管理
- 用户面板管理

#### 3. 协作编辑 (Yjs)
- 实时同步编辑内容
- 显示用户光标位置
- 处理冲突解决

#### 4. 版本管理 (useSnapshot.js)
- 自动创建文档快照
- 查看历史版本
- 版本对比和恢复

#### 5. 批注系统 (useAnnotations.js)
- 添加和管理批注
- 批注显示和隐藏
- 批注通知

## Quill 扩展

项目对 Quill 编辑器进行了以下扩展：

- **TodoBlot**：待办事项组件
- **IconBlot**：图标组件
- **CommentAnchorBlot**：批注锚点组件
- **LineHeightBlock**：行高调整组件
- **codeBlockShortcutBinding**：代码块快捷键绑定

## 测试

项目使用 Vitest 进行测试，测试文件位于 `src/tests/` 目录。

### 运行测试

```bash
yarn test
# 或
npm run test
```

## 贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 开启 Pull Request

## 许可证

ISC License

## 使用
http://{host}:{port}/?uid=zhangb&doc=doc-editor-demo&templateId={templateId}
- uid 用户ID
- doc 文档ID
- templateId 模板ID