# onlineEditor

**Repository Path**: miaoisworking/online-editor

## Basic Information

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

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-13
- **Last Updated**: 2025-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 在线协同编辑器（示例实现）

这是一个最小可运行的在线协同文档编辑器示例，技术栈为：Vue 3 + Vite 前端，Node.js + Express + socket.io 后端。项目目标是实现类似飞书文档的协作体验（基线实现），包括：

- 富文本编辑（字体颜色、字号、加粗、斜体）
- 插入图片（可上传到服务端），支持缩放（依赖 Quill 插件）
- 实时协同（使用 socket.io 广播增量 delta）以及“保存/刷新”按钮用于显式同步
- 分享链接：通过 URL 的 `?id=` 参数标识文档

目录结构：

- `server/`：后端服务（端口 3000）
- `client/`：前端（Vite 开发，生产静态包由 Docker `serve` 提供）（端口 5173）
- `docker-compose.yml`：用于在本机通过 Docker 启动前后端

开发与运行说明（Windows PowerShell）：

1) 本机快速启动（开发）

- 打开一个终端到 `server` 目录，安装依赖并运行后端：

```powershell
cd server; npm install; npm run dev
```

- 打开另一个终端到 `client` 目录，安装依赖并运行前端（支持热重载）：

```powershell
cd client; npm install; npm run dev
```

前端默认运行在 `http://localhost:5173`，后端在 `http://localhost:3000`。在浏览器打开 `http://localhost:5173/?id=default` 即可编辑。将页面打开在局域网内其它设备上（替换为机器 IP），不同窗口/设备用相同 `?id=` 即可协同。

2) 使用 Docker Compose （便于局域网部署）

```powershell
docker compose up --build
```

之后服务映射端口：后端 `3000`，前端 `5173`。在局域网中访问 `http://<host-ip>:5173/?id=default`。

主要接口（后端）：

- `GET /doc/:id` - 读取文档
- `POST /doc/:id` - 保存文档，body: `{ html: "..." }`
- `POST /upload` - 图片上传（multipart/form-data，字段名 `image`），返回 `{ url }`
- `POST /new` - 创建新的 document id

设计说明与可扩展点：

- 当前使用 Quill 的 delta 协同模型，并通过 socket.io 广播 delta，适合低到中等并发的协同场景；更强一致性需求可考虑集成 OT 或 CRDT 实现（如 Yjs 或 ShareDB）。
- 图片存储目前存放在 `server/public/uploads`，生产环境建议接入对象存储（S3、阿里 OSS 等）。
- 当前保存为完整 HTML 字符串（非富版本历史），可按需改为按版本或按操作日志保存。

示例参考：Etherpad（项目示例数据） - https://github.com/ether/etherpad-lite

代码注释：

后端与前端源码都包含中文注释，方便阅读与二次开发。

如果你希望我：

- 把项目打包到单个可运行的 ZIP
- 或者把协同改为基于 Yjs（CRDT）的实现
- 或者添加用户登录与访问控制

告诉我需要的下一步，我可以继续实现。