# 在线word **Repository Path**: CodeCxil/online-word ## Basic Information - **Project Name**: 在线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**: 1 - **Forks**: 0 - **Created**: 2026-04-07 - **Last Updated**: 2026-04-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 在线文档编辑器 (Online Word) 一个基于 Web 的富文本文档编辑和管理系统，提供类似于桌面 Word 的编辑体验，支持文档的创建、格式化、插入多媒体元素、签名、导出/导入 DOCX 等功能。 Online Word 一个基于 Vue 3 + TypeScript + Vite 构建的在线富文本 Word 编辑器前端应用 项目简介 Online Word 是一款功能强大的在线文档编辑器，支持富文本编辑、Word 文档导入导出、表格插入、图片插入、脚注批注、数字签名等企业级文档处理功能。应用采用组件化架构，提供流畅的编辑体验。 ## 主要特性 - **富文本编辑**：支持文字加粗、斜体、下划线、删除线、上下标、字体颜色、背景高亮等多种格式。 - **段落排版**：左对齐、居中、右对齐、两端对齐、首行缩进、行间距设置。 - **列表**：编号列表、项目符号列表、复选框列表。 - **插入元素**：图片、表格、分割线、页眉页脚、水印、代码块、LaTeX 公式、日期选择器。 - **页面设置**：纸张大小、纸张方向、页边距、页眉页脚、打印预览。 - **查找替换**：支持正则表达式的搜索与批量替换。 - **手写签名**：提供签名面板，支持手写绘制并嵌入文档。 - **目录自动生成**：基于文档标题层级自动生成目录。 - **DOCX 导入/导出**：完整的 DOCX 文件解析与生成，保留大多数排版样式。 - **多语言**：内置中文、英文语言包，支持国际化配置。 - **响应式布局**：适配桌面端与移动端的不同屏幕尺寸。 - **主题切换**：支持亮色/暗色主题（基于 Arco Design）。 ## 技术栈 - **前端框架**：Vue 3 + TypeScript - **构建工具**：Vite - **状态管理**：Pinia - **路由**：Vue Router - **UI 组件库**：Arco Design - **样式预处理**：Less + PostCSS - **代码质量**：ESLint、Stylelint、Prettier、commitlint - **部署**：支持环境变量配置（开发/生产） ## 项目结构 ``` src ├── api # 接口请求封装 ├── assets # 静态资源（图片、字体、样式文件） ├── components # 公共组件 ├── config # 构建配置、Vite 插件 ├── directive # 自定义指令（如权限控制） ├── hooks # 组合式函数（复用逻辑） ├── locales # 国际化语言包 ├── router # 路由配置与守卫 ├── store # Pinia 状态仓库 ├── types # 类型声明 ├── utils # 工具函数（认证、请求、上传、导出等） └── views # 页面视图 ├── word # 主编辑器（Word 风格） ├── words # Word 变体（支持更多导入/导出功能） ├── wordsbeat # 另一套编辑器实现 └── ... ``` > 目录结构采用了功能模块化划分，便于后期维护和扩展。 ## 快速开始 ### 前置要求 - 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` —— 页面标题 > 请根据实际情况修改对应的环境变量文件。 ## 贡献指南 欢迎提交 Issue 报告问题或 Pull Request 增加新功能。提交代码前请确保： 1. 遵循项目的 ESLint、Stylelint 代码规范； 2. 提交信息符合 commitlint 约定（如 `feat:`, `fix:`, `docs:` 等）； 3. 新增或修改的功能已通过本地测试。 ## 开源协议 目前项目尚未明确声明开源许可证，具体使用请参考项目仓库的最新说明。 --- 如需了解更多细节，请查阅项目内部的注释文档或直接访问仓库页面。祝使用愉快！