爱意满满的作品展示区。
demomacro

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

  •  
  •   demomacro ·
    DemoMacro · 2 days ago · 902 views

    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/ ,欢迎反馈

    1 replies    2026-07-05 09:42:43 +08:00
    larry011
        1
    larry011  
       2 days ago via Android
    收藏一下,在线编辑 docx 还是很场景的需求
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2957 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 34ms · UTC 14:32 · PVG 22:32 · LAX 07:32 · JFK 10:32
    ♥ Do have faith in what you're doing.