GoForum🌐 V2EX

docen + office-open:不绑定框架的网页端 DOCX 可分页编辑器

demomacro · 2026-07-05 01:38 · 0 次点赞 · 0 条回复

@main/assets/editor-demo.png" alt="Docen Editor" />

office-open 是一个 OOXML 解析/生成库,浏览器和 Node/Bun 通用,高性能、高保真,支持 .docx, .pptx, .xlsx 与对象模型的双向转换、模板填充。

docen 在它之上提供编辑器,基于 Tiptap ( ProseMirror ),通过自定义扩展在节点和 mark 上保留 shading/border/indent/spacing/floating 等 DOCX 属性,尽可能保证编辑往返保真。在线编辑 DOCX 的方案不少( Umo Editor 、SuperDoc 、docx-editor ),再造一个 docen 主要为了:

  1. 双向转换 底座是 OOXML 模型,docx 既是编辑产物也是数据——可以用代码拼装段落/表格/图片、套模板、批量生成报告或合同,再把同一个模型交给编辑器修改。纯编辑器和纯生成库通常只占一头,通过 Tiptap/ProseMirror JSON 作为轻量的中间层,方便了对多份 .docx 的合成,也间接实现了对 HTML 、Markdown 的双向转换。
  2. 不绑框架 <docen-document> 是原生 Web Component ,Vue / React / 原生 HTML 都能直接使用,另附 @docen/vue 这个 Vue 3 适配层,把编辑器能力暴露成 v-model + 模板 ref 。
  3. 贴近 MS Office 的使用习惯 外壳用 Fluent UI ,扩展模型参考了 Office.js ( ribbon 、task pane 、add-in ),写一个 docen 插件和写 Office 插件思路接近。
  4. 基于原生 HTML 的分页 固定页面、内容溢出自动流到下一页,用 ProseMirror 的 appendTransaction 物理重排,编辑、预览、导出共享同一份文档树。在使用原生 HTML 渲染的前提下,尽可能保证预览和导出一致,少量复杂版式(如表格行跨页)会因 contenteditable 的限制产生误差。

Math / Chart / SmartArt 的渲染和编辑是接下来的重点,目前尚未支持,后续还会增加对 .pptx 和 .xlsx 的编辑器支持。

在线体验: https://docen.office-open.com/ ,欢迎反馈

0 条回复
添加回复
你还需要 登录 后发表回复

登录后可发帖和回复

登录 注册
主题信息
作者: demomacro
发布: 2026-07-05
点赞: 0
回复: 0