# Vue-Word

**Repository Path**: CodeCxil/vue-word

## Basic Information

- **Project Name**: Vue-Word
- **Description**: 体验地址http://word.link8.top/ Online Word 一个基于 Vue 3 + TypeScript + Vite 构建的在线富文本 Word 编辑器前端应用 项目简介 Online Word 是一款功能强大的在线文档编辑器，支持富文本编辑、Word 文档导入导出、表格插入、图片插入、脚注批注、数字签名等企业级文档处理功能。应用采用组件化架构，提供流畅的编辑体验。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://word.link8.top/
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2026-04-15
- **Last Updated**: 2026-04-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# Online Word 在线文档编辑器

一个基于 Vue 3 + TypeScript + Vite 构建的在线富文本 Word 编辑器前端应用。

## 项目简介

Online Word 是一款功能强大的在线文档编辑器，提供类似于桌面 Word 的编辑体验。项目采用组件化架构设计，支持文档的创建、格式化、插入多媒体元素、签名、导出/导入 DOCX 等企业级文档处理功能。

## 主要特性

- **富文本编辑**：支持文字加粗、斜体、下划线、删除线、上下标、字体颜色、背景高亮等多种格式
- **段落排版**：左对齐、居中、右对齐、两端对齐、首行缩进、行间距设置
- **列表功能**：编号列表、项目符号列表、复选框列表
- **插入元素**：图片、表格、分割线、页眉页脚、水印、代码块、LaTeX 公式、日期选择器
- **页面设置**：纸张大小、纸张方向、页边距、页眉页脚、打印预览
- **查找替换**：支持正则表达式的搜索与批量替换
- **手写签名**：提供签名面板，支持鼠标或触屏绘制并嵌入文档
- **目录自动生成**：基于文档标题层级自动生成目录
- **DOCX 导入/导出**：完整的 DOCX 文件解析与生成，保留大多数排版样式
- **多语言支持**：内置中文、英文语言包，支持国际化配置
- **响应式布局**：适配桌面端与移动端的不同屏幕尺寸
- **主题切换**：支持亮色/暗色主题

## 技术栈

| 类别 | 技术 |
|------|------|
| 前端框架 | Vue 3 + TypeScript |
| 构建工具 | Vite |
| 状态管理 | Pinia |
| 路由 | Vue Router |
| UI 组件库 | Arco Design |
| 富文本引擎 | canvas-editor |
| 样式预处理 | Less + PostCSS |
| 代码质量 | ESLint、Stylelint、Prettier、commitlint |

## 项目结构

```
├── config                  # 构建配置、Vite 插件
├── public                 # 静态资源
├── src
│   ├── api               # 接口请求封装
│   ├── assets            # 静态资源（图片、字体、样式）
│   ├── components        # 公共组件
│   ├── directive        # 自定义指令
│   ├── hooks            # 组合式函数
│   ├── locales          # 国际化语言包
│   ├── router           # 路由配置
│   ├── store            # Pinia 状态仓库
│   ├── types            # 类型声明
│   ├── utils            # 工具函数
│   └── views            # 页面视图
│       ├── wordsbeat    # 核心编辑器实现
│       │   ├── canvas-editor   # 富文本引擎核心
│       │   ├── official-ui    # 官方UI组件
│       │   └── utils          # 编辑器工具函数
│       └── ...
├── index.html
└── package.json
```

## 快速开始

### 前置要求

- Node.js ≥ 16
- pnpm ≥ 7（项目使用 pnpm 管理依赖）

### 安装依赖

```bash
pnpm install
```

### 启动开发服务器

```bash
pnpm dev
```

默认会在 `http://localhost:5173` 启动热更新的开发服务。

### 构建生产版本

```bash
pnpm build
```

构建产物会输出到 `dist` 目录，可直接部署到静态服务器。

### 代码检查与修复

```bash
# ESLint 检查
pnpm lint

# Stylelint 检查
pnpm lint:style

# 自动修复代码格式
pnpm lint:fix
```

## 常用功能示例

### 在文档中添加手写签名

1. 点击工具栏中的 **签名** 图标，弹出签名绘制面板
2. 使用鼠标或触屏绘制签名
3. 完成绘制后点击 **确定**，签名将嵌入到光标所在位置

### 导入本地 DOCX 文件

在编辑页面左上角点击 **导入**，选择本地 `.docx` 文件，系统会自动解析并转换为可编辑的富文本内容。

### 导出为 DOCX

完成编辑后，点击 **导出** 按钮，系统会生成兼容 Microsoft Word 的 `.docx` 文件供下载。

## 环境变量

项目根目录下提供两套环境变量文件：

- `.env.development` —— 开发环境配置
- `.env.production`   —— 生产环境配置

常见配置项包括：

| 变量名 | 说明 |
|--------|------|
| VITE_API_BASE_URL | 后端接口地址 |
| VITE_APP_TITLE | 页面标题 |

> 请根据实际情况修改对应的环境变量文件。

## 相关文档

- [wordsbeat 核心编辑器开发调试文档](./src/views/wordsbeat/DEVELOPER_GUIDE.md)

## 贡献指南

欢迎提交 Issue 报告问题或 Pull Request 增加新功能。提交代码前请确保：

1. 遵循项目的 ESLint、Stylelint 代码规范
2. 提交信息符合 commitlint 约定（如 `feat:`、`fix:`、`docs:` 等）
3. 新增或修改的功能已通过本地测试

## 开源协议

目前项目尚未明确声明开源许可证，具体使用请参考项目仓库的最新说明。