企业官网建设流程全解析

Vue 文档编辑器快速上手指南：纸张尺寸的 WYSIWYG 富文本编辑器

【免费下载链接】vue-document-editor:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps项目地址: https://gitcode.com/gh_mirrors/vu/vue-document-editor

Vue 文档编辑器（vue-document-editor）是一个基于 Vue 的 WYSIWYG 富文本编辑器，它借助浏览器原生的可编辑区域，把 HTML 内容自动铺到一张张类似 A4 纸的页面上。它解决的问题很具体：在已经排好版的文档上做定点修改，而不是从零开始写长文。

📄 适用场景：在已有版式上做定点修改

先说定位：它不是全能文字处理软件，没有自带工具栏，也不打算替代 Word，而是专做一件事——文档的整体版式已经定好，只需要局部改动。

典型工作是这样的：发票、合同或证书由 HTML 模板生成，用户只需改几个字段；或者把每一页做成一个 Vue 组件，页面本身就是可交互的模板，用户在浏览器里直接编辑预设好的内容。

想看源码可以直接拉仓库：

git clone https://gitcode.com/gh_mirrors/vu/vue-document-editor

Vue 富文本编辑器如何分页、打印与定制页面

能力可以按三块来看：分页排版、打印定制、模板交互。

分页与边距控制

• 它能按毫米设置页面尺寸与边距，不同页码还能配不同边距
• 你能手动插入分页符；内容超出页面时，新页面会自动生成
• 它能按单词把句子切到下一页——这是实验性功能，目前只对纯 HTML 内容生效

打印与页面覆盖

• 打印直接走浏览器原生能力，纸面效果与编辑视图一致
• 你能在每页叠加自定义的页眉、页脚和页码

模板交互与样式读取

• 你能用 Vue 组件当页面模板，示例中的发票模板就是这种做法
• 它能读出光标所在位置的文本样式，方便同步工具栏状态
• 你能用智能缩放和多种页面显示模式来查看长文档

📈 项目活跃度：Vue 3 迁移后仍在迭代

主分支已经迁到 Vue 3，Vue 2 项目可继续使用 1.x 系列版本。更新记录显示维护节奏没停：核心重写过一遍以避开 Vue 渲染与浏览器可编辑区域的冲突，Safari 光标错位、单页内容下退格键失灵、打印时多出一页空白等问题被逐个修掉，表格跨页时也改为整行移动而不是拦腰截断。

如果你的需求是把预排好版的文档搬上网页、让用户做定点修改，这套编辑器值得一试；项目以 MIT 协议开源，遇到问题或想加功能，直接提 issue、发 PR 就行。

【免费下载链接】vue-document-editor:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps项目地址: https://gitcode.com/gh_mirrors/vu/vue-document-editor