vue-document-editor 完整指南从零跑通 A4 自动分页富文本编辑器【免费下载链接】vue-document-editor:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps项目地址: https://gitcode.com/gh_mirrors/vu/vue-document-editor 项目速览vue-document-editor 是一个面向 Vue 3 的 A4 纸张大小所见即所得WYSIWYG输入时直接看到排版效果文档编辑器核心能力是把长 HTML 内容自动铺进一页页纸里超出部分逐字拆分到下一页。它不打算替代 Word而是解决一个更具体的场景你的业务系统已经生成了一份带格式的文档合同、发票、报告需要让用户在浏览器里做针对性修改然后直接打印或导出。整个组件 API 极简、不附带工具栏嵌入任何 Vue 应用都不会打架这也是它值得看的原因。 快速跑起来环境要求Node.js 16 以上 npm项目使用 Vue CLI 5.x。git clone https://gitcode.com/gh_mirrors/vu/vue-document-editor cd vue-document-editor npm install npm run serve跑通后浏览器会打开本地 demo顶部一条格式化/缩放/纸张菜单下方是纸张样式的页面——第一页是可编辑正文第二页是一张由 Vue 组件渲染的交互式发票模板你往正文里打字文字溢出后会自动出现在新的一页上。 核心功能拆解按词自动分页核心卖点内容一旦超出当前页高度引擎会把末尾的内容逐词搬到下一页容器元素p、div则递归克隆后继续拆分保证样式不丢。整个流程由 src/DocumentEditor/DocumentEditor.vue 的fit_content_over_pages()驱动实际搬运逻辑在 src/DocumentEditor/imports/page-transition-mgmt.js。删字时还会反向回收backward-propagation把下一页开头的内容合并回当前页。用 Vue 组件做交互式页面模板content是一个数组每项对应一次分页。项可以是 HTML 字符串也可以是对象{ template: markRaw(InvoiceTemplate), props: { invoice_number: AB38052985 } }第二个写法会把这个.vue组件通过defineCustomElement挂成整页的交互模板输入框、按钮都能用模板页固定占一整页超出部分隐藏。demo 里的发票就是这种写法参考 src/Demo/InvoiceTemplate.ce.vue。页眉页脚覆盖层传入overlay函数参数是页码和总页数返回 HTML可以为指定页面加页眉、页脚或页码demo 里给第 3 页之后每页加了页码。原生打印支持before_print会在系统打印前临时替换document.body把每页按真实毫米尺寸重排并注入page规则打印完由after_print还原。直接调window.print()就能得到和屏幕上一致的纸张输出。 源码导读值得精读的文件只有 3 个1. src/DocumentEditor/DocumentEditor.vue —— 编辑器主体管一切props页面尺寸、边距、缩放、显示模式、pages数据模型、分页引擎、内容回传。关键逻辑集中在fit_content_over_pages()约 174 行起先保存光标选区再遍历每页做正向溢出搬运 反向空页回收最后恢复选区并把新 HTML 通过update:content事件回传给父组件。改这个文件的 props 会直接影响对外 API。2. src/DocumentEditor/imports/page-transition-mgmt.js —— 搬运工move_children_forward_recursively()是拆分核心简化逻辑如下while(child.childNodes.length !stop_condition()){ const sub_child child.lastChild; if(sub_child.nodeType Node.TEXT_NODE){ // 文本按词切分最后一段挪到下一页直到本页不溢出 } // h1/tr 及 do_not_break() 返回 true 的元素整体移动不拆 }跨页的容器靠s_tag随机标记配对水印机制反向合并时据此接回去。如果你遇到某段内容拆页后样式错乱先来这里打断点。3. src/Demo/Demo.vue —— 完整参考实现库本身不管工具栏和撤销/重做这个文件给了全套做法document.execCommand驱动的格式化菜单、v-model:content双向绑定、监听content变化自建历史栈实现 undo/redo、Ctrl滚轮缩放。照抄这个文件就能搭出一个可用的文档模块。 扩展与二次开发想防止某类元素被拆页比如section整块移到下一页给组件传:do_not_break(elt) elt.tagName.match(/section/i)函数在每个元素跨页前被调用返回true即整体搬运无需改库源码。想换纸张规格、边距、外观运行时改page_format_mm/page_margins两个 prop 即可页面阴影、圆角、背景色通过覆盖 CSS 变量--page-box-shadow等实现变量清单见 API.md。⚠️ 踩坑记录新手高频问题一句话解法CtrlZ 撤销失效分页机制每次输入都在重建 HTML浏览器原生撤销栈已丢失需像 Demo.vue 那样 watchcontent自建历史栈Vue 模板页不会自动分页分页只对纯 HTML 内容生效交互式模板页固定一整页溢出内容会被裁掉超长单段文本卡顿大段文字务必拆成多个p页码过多同样拖慢整体重排空页无法编辑Chrome页面 HTML 不能是空的至少保留divbr/div库内部已处理手动改 DOM 时别删光下一步先跑通 demo 并通读 API.md 掌握全部 props再对照 Demo.vue 把自己的业务文档接入。改动记录与版本差异可查 CHANGELOG.mdVue 2 项目请使用 1.x 版本。现在就去 clone 仓库敲下npm run serve吧。【免费下载链接】vue-document-editor:page_facing_up: Paper-sized WYSIWYG document editor for Vue apps项目地址: https://gitcode.com/gh_mirrors/vu/vue-document-editor创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考