# doc-editor

**Repository Path**: luopeng1999/doc-editor

## Basic Information

- **Project Name**: doc-editor
- **Description**: Doc Editor 是一个功能丰富的在线文档编辑器，专为需要强大文档编辑能力的应用场景而设计。它提供了完整的富文本编辑功能，包括文本格式化、表格操作、图片插入、Word 文档导入导出等核心特性。采用 Ribbon 风格的工具栏设计，界面直观易用，同时支持主题切换、批注功能、大纲导航等高级特性，为用户提供接近桌面级文档编辑软件的体验。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-01
- **Last Updated**: 2025-12-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Doc Editor

一个基于 Vue 3 + TypeScript + TipTap 构建的现代化文档编辑器，参考 [Umo Editor](https://github.com/umodoc/editor) 设计理念，提供类似 Microsoft Word 的编辑体验。

## 📖 简介

Doc Editor 是一个功能丰富的在线文档编辑器，专为需要强大文档编辑能力的应用场景而设计。它提供了完整的富文本编辑功能，包括文本格式化、表格操作、图片插入、Word 文档导入导出等核心特性。采用 Ribbon 风格的工具栏设计，界面直观易用，同时支持主题切换、批注功能、大纲导航等高级特性，为用户提供接近桌面级文档编辑软件的体验。

## ✨ 特性

### 📝 丰富的编辑功能
- **文本格式化**：粗体、斜体、下划线、删除线、上标、下标
- **字体设置**：字体族、字号、行距、字体增减
- **颜色与高亮**：文字颜色、背景高亮
- **对齐方式**：左对齐、居中、右对齐、两端对齐、分散对齐
- **列表支持**：有序列表、无序列表、任务列表
- **缩进控制**：增加/减少缩进
- **标题层级**：多级标题支持（H1-H6）
- **格式刷**：快速复制格式
- **清除格式**：一键清除所有格式

### 📊 高级功能
- **表格操作**：插入表格、增删行列、合并/拆分单元格、表格样式设置
- **代码块**：支持语法高亮（基于 lowlight）
- **引用块**：块级引用支持
- **水平线**：分隔线插入
- **图片插入**：支持图片上传和插入
- **链接管理**：超链接插入和编辑
- **拖拽手柄**：块级元素拖拽操作

### 📄 文档功能
- **Word 导入/导出**：支持 `.docx` 格式的导入和导出（基于 mammoth 和 docx）
- **页面设置**：
  - 页面尺寸（A4、A3、Letter 等）
  - 页面方向（横向/纵向）
  - 页面边距自定义
  - 页面背景色设置
  - 水印功能
- **自动保存**：可配置的自动保存机制
- **字符计数**：实时统计文档字符数
- **打印功能**：支持文档打印预览和打印

### 🎨 用户体验
- **Ribbon 工具栏**：类似 Office 的 Ribbon 风格工具栏，功能分组清晰
- **上下文菜单**：右键菜单快速操作
- **块菜单**：块级元素的快速操作菜单
- **大纲面板**：文档结构导航
- **批注功能**：支持文档批注和评论
- **主题切换**：支持亮色/暗色主题
- **全屏模式**：专注编辑体验
- **响应式设计**：适配不同屏幕尺寸

### 🔧 技术特性
- **基于 TipTap**：强大的富文本编辑框架
- **Vue 3 Composition API**：现代化的 Vue 开发体验
- **TypeScript**：完整的类型支持
- **组件化设计**：高度模块化，易于扩展
- **可配置性强**：丰富的配置选项，满足不同场景需求

## 🚀 快速开始

### 安装依赖

```bash
pnpm install
```

### 开发

```bash
pnpm dev
```

### 构建

```bash
pnpm build
```

### 预览

```bash
pnpm preview
```

## 📦 技术栈

- **Vue 3** - 渐进式 JavaScript 框架
- **TypeScript** - 类型安全的 JavaScript
- **Vite** - 下一代前端构建工具
- **TipTap** - 基于 ProseMirror 的富文本编辑器框架
- **Element Plus** - Vue 3 组件库
- **UnoCSS** - 原子化 CSS 引擎
- **Sass** - CSS 预处理器

## 🙏 致谢

特别感谢 [Umo Editor](https://github.com/umodoc/editor) 项目及其贡献者，为本项目提供了优秀的设计灵感和架构参考。Umo Editor 是一个出色的文档编辑器解决方案，其创新的设计理念和丰富的功能实现为本项目的开发提供了宝贵的参考。

## 📄 许可证

MIT