# @docx-editor\.dev/react 中文文档 规范地址：https://npmcn.com/package/%40docx-editor.dev/react/ 版本：2\.37\.0 npm 元数据更新时间：2026-11-11T10:28:53.853Z 中文译文更新时间：2026-11-12T14:23:52.072Z 软件包许可：Apache-2\.0 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40docx-editor.dev/react 原文对照：https://npmcn.com/package/%40docx-editor.dev/react/?lang=original 项目主页：https://docx-editor.dev/ 源码仓库：https://github.com/eigenpal/docx-editor ## 关键信息（来自 npm 元数据） - 包体积（解压后）：1.7 MB，19 个文件 - 模块格式：ESM + CJS - TypeScript 类型：包内自带 - 运行依赖：4 个 - peer 依赖：react ^18\.0\.0 \|\| ^19\.0\.0，react-dom ^18\.0\.0 \|\| ^19\.0\.0，@docx-editor\.dev/core ~2\.37\.0 - 首次发布：2026-07-16T11:39:49.974Z - 最新版本发布：2026-11-11T10:28:53.356Z - 近 30 天下载量：516920（2026-10-13 至 2026-11-11，npm 官方下载统计） - 已发布版本数：64（近 12 个月 64 个） ## 中文简介 React DOCX 编辑器适配器,用于@docx-editor.dev编辑器合同. ## 安装 ```sh npm install @docx-editor.dev/react ``` 也可以使用：`pnpm add @docx-editor.dev/react`、`yarn add @docx-editor.dev/react`、`bun add @docx-editor.dev/react` ## README [![DOCX Editor by EigenPal](https://raw.githubusercontent.com/eigenpal/docx-editor/main/.github/assets/readme-logo-light.svg)](https://www.docx-editor.dev/) [![npm version](https://img.shields.io/npm/v/@docx-editor.dev/react.svg?style=flat-square&color=3B5BDB)](https://www.npmjs.com/package/@docx-editor.dev/react) [![npm downloads](https://img.shields.io/npm/dm/@docx-editor.dev/react.svg?style=flat-square&color=3B5BDB)](https://www.npmjs.com/package/@docx-editor.dev/react) [![license](https://img.shields.io/badge/license-Apache_2.0-blue.svg?style=flat-square&color=3B5BDB)](https://github.com/eigenpal/docx-editor/blob/main/LICENSE) [![Demo](https://img.shields.io/badge/Live_Demo-3B5BDB?style=flat-square&logo=vercel&logoColor=white)](https://docx-editor.dev/editor) [![Documentation](https://img.shields.io/badge/Docs-3B5BDB?style=flat-square&logo=readthedocs&logoColor=white)](https://www.docx-editor.dev/docs) # @docx-editor.dev/反应 一个视觉 `.docx` react 编辑器 。 打开 DOCX 文档,编辑其相接版式,并保存 DOCX 文件. 解析和序列化在浏览器中运行. 保存保存未被移动的内容、不支持的OOXML和包的有效载荷。 连续集成(CI)检查文档结构和保存再开放行为. 安装适配器及其所需的引擎端点 : ```bash npm install @docx-editor.dev/react @docx-editor.dev/core ``` ## 特征 - [打开、编辑并保存文档](https://www.docx-editor.dev/docs/2.x/react/props)。 。 。 . - [编写您的编辑界面](https://www.docx-editor.dev/docs/2.x/react/composition)。 。 。 . - [通过钩子连接控制](https://www.docx-editor.dev/docs/2.x/react/hooks)。 。 。 . - [翻译编辑器控件](https://www.docx-editor.dev/docs/2.x/i18n)。 。 。 . ## 快开始 导入样式表一次, 并给编辑器一个有定义高度的容器 : ```tsx import { useState } from 'react'; import { DocxEditor } from '@docx-editor.dev/react'; import '@docx-editor.dev/core/styles/editor.css'; export function App() { const [doc, setDoc] = useState(); return (
{ const file = e.target.files?.[0]; setDoc(file ? new Uint8Array(await file.arrayBuffer()) : undefined); }} />
{doc && }
); } ``` `` 包括标题栏、菜单、工具栏、导航窗格、上下文菜单和文档页面。 它装满了母容器. 对于Next.js和服务器侧渲染(SSR),在浏览器中加载编辑器. 使用 `dynamic(..., { ssr: false })` 在客户端组件内. ## 构建自己的用户界面 使用组件和钩来构建自己的控制. 被包控件使用相同的公用API. ```tsx import { DocxEditor, useEditorCommand } from '@docx-editor.dev/react'; function BoldButton() { const bold = useEditorCommand('text.bold'); return ( ); } export function Editor({ bytes }: { bytes: Uint8Array }) { return ( ); } ``` `Root` 拥有编辑器实例 . `Viewport` 用品滚动,和 `Content` 显示页面。 视需要添加其他控制 . 使用 `className`, (中文(简体) ), `data-active`,以及 `icon` 为外观变化。 使用 `asChild` 将行为应用到自己的元素。 使用 `hidden` 或者说 `preset={false}` 用于替换控件,或用钩子构建控件. ## 钩子 | 钩子 | 它给你什么 | | --- | --- | | `useEditorCommand(slot)` | `execute`, (中文(简体) ), `isActive`, (中文(简体) ), `isEnabled`, (中文(简体) ), `disabledReason` | | `useEditorState(selector)` | 编辑快照的回忆片段 | | `useDocxEditor()` | 编辑器实例,或 `null` 挂载前 | | `useEditorEvent(event, fn)` | `change`, (中文(简体) ), `selectionChange`, (中文(简体) ), `error` | | `useFontFamily()` 编号 : `useParagraphStyle()` | 值控制:当前值、选项、设置 | | `usePageSetup()` | 边距、方向、纸张大小 | | `useDocumentOutline()` 编号 : `useDocumentSearch()` | 无头的导航窗 | | `useContentControl()` | 护身符的内容控制 | 读取 `isEnabled` 设置残疾状态。 显示 `disabledReason` 当命令不可用时. ## 配套软件包 - [`@docx-editor.dev/pro`](https://www.npmjs.com/package/@docx-editor.dev/pro) ——被跟踪的更改,注释,自定义节点 - [`@docx-editor.dev/editor-api`](https://www.npmjs.com/package/@docx-editor.dev/editor-api) – Office.js API 支持的子集,用于服务器和浏览器编辑 - [`@docx-editor.dev/core`](https://www.npmjs.com/package/@docx-editor.dev/core) 这个适配器制造的引擎 ## 哪些 API 任务 使用 React 或 Vue 适配器钩, 复检钩,以及 `DocxEditorReview` 从 `@docx-editor.dev/pro/react` 或者说 `@docx-editor.dev/pro/vue` 用于构建浏览器审查控制。 使用编辑 API 在 `@docx-editor.dev/editor-api` 用于文档自动化。 它遵循Office.js对象模型,在浏览器和服务器主机中运行. | 任务 | 浏览器控制( React 或 Vue) | 文件自动化 | | --- | --- | --- | | [对已找到文本的评论](https://www.docx-editor.dev/docs/2.x/recipes/comment-on-found-text) | `editor.findMatches`, (中文(简体) ), `editor.selectMatch`,则 `useReview().comment` | `body.search`,则 `Range.insertComment` | | [对线索的答复](https://www.docx-editor.dev/docs/2.x/pro/comments) | `useReview().reply(item, text)` | `Comment.reply(text)` | | [记录跟踪替换](https://www.docx-editor.dev/docs/2.x/recipes/tracked-replacement) | 那么建议模式 `editor.exec({ type: 'replaceMatch', match, text })` | `document.changeTrackingMode = 'TrackMineOnly'`,则 `Range.insertText(text, 'Replace')` | | [提议将AI重写为已跟踪的更改](https://www.docx-editor.dev/docs/2.x/recipes/propose-rewrite) | `prepareRewrite` 结束 `DocxEditor.createBrowser` | `prepareRewrite` 从 `@docx-editor.dev/editor-api/agent` | | [接受或拒绝更改](https://www.docx-editor.dev/docs/2.x/recipes/accept-reject-without-scrolling) | `useReview().accept(item)` 或者说 `useReview().reject(item)` | `Revision.accept()` 或者说 `Revision.reject()` | | [不滚动打开更改](https://www.docx-editor.dev/docs/2.x/recipes/accept-reject-without-scrolling) | `useReview().setActive(key, { reveal: false })` | 不适用:无取景口 | | [突出显示区域](https://www.docx-editor.dev/docs/2.x/recipes/highlight-ranges) | `useHighlights(name, source, options)` | 不适用 | | [自定义审查铁路卡](https://www.docx-editor.dev/docs/2.x/recipes/custom-review-cards) | `DocxEditorReview` 与 `preset` 设置为 `false`, (中文(简体) ), `useStackedReviewPositions`,以及 `useReviewRailMetrics` | 不适用 | | 关于选择的注释按钮 | `DocxEditorReview.AddComment` 作为直系儿童 `DocxEditorReview`,或 `useEditorCommand('review.addComment')` | 不适用 | | [页面设置和段落对话框](https://www.docx-editor.dev/docs/2.x/customization/dialogs) | `DocxEditor.PageSetupDialog` 或者说 `DocxEditor.ParagraphDialog` | `Section.pageSetup`,以及 `Paragraph` 属性,例如 `alignment` | 这个包装了任务秘方 [`docs/index.md`](https://npmcn.com/package/%40docx-editor.dev/react/docs/index.md).这些网站还有: [任务配方](https://www.docx-editor.dev/docs/2.x/recipes)。 。 。 . ## 文档 - [快速启动](https://www.docx-editor.dev/docs/2.x/quickstart) - [组成](https://www.docx-editor.dev/docs/2.x/react/composition) - [钩子](https://www.docx-editor.dev/docs/2.x/react/hooks) - [推荐书和参考书](https://www.docx-editor.dev/docs/2.x/react/props) - [导出 Markdown 和 PDF](https://www.docx-editor.dev/docs/2.x/guides/export) - [打印文档](https://www.docx-editor.dev/docs/2.x/guides/print) ## 许可证 阿帕奇 - 2.0 ### 自定义不支持的内容 登记组件 `DocxEditor` 或者说 `DocxEditor.Root`。每项声明 处理匹配不支持的内容,包括不透明的内线和块元素. ```tsx element.namespaceUri === 'urn:my-widgets'} layout={{ width: 180, height: 48 }} > {({ element }) => } {({ element }) => } ``` 首个挂载匹配声明取胜. 提案更新保留其优先级. 取消和提出宣言再次给予后来的优先地位。 要禁用一个 特定渲染器暂时挂起并更改 `match`,或使用 匹配的不重复. 奥米 `match` 为了一个全面。 在上游使用源元数据; 几何不是 在页形之前可用 。 返回时 `null` 以保留默认占位符. 空结果不选择下一个声明 . `UnsupportedElement` 曝光情况 `nodeId`, (中文(简体) ), `ownerPartName`, (中文(简体) ), `namespaceUri`, (中文(简体) ), `localName`, (中文(简体) ), `source`, (中文(简体) ), `placement`,以及 `label`。 。 。 . `bounds` 描述保留的 框的后框。 可选 `drawing` 财务报告和审定财务报表 `equation` 提供专门记录 元数据。 将源内容视为只读且不可信 . `layout` 在文档点中保留不透明元素的宽度和高度. 源入会决定内入或块流. 无 `layout`,不透明 内线元素预留120×24分;区块预留240×96分. 尺寸必须是正的、有限度的,最多10万分. 绘图和等式回落保留了现有的几何学. 无比不透明的内容保留了它现有的隐形行为. 没有支持的元素中的属性、元数据和嵌入有效载荷不 独立内容事件. 组成部分保留框架背景和同一页再油漆的当地状态. 当页化、虚拟化或文档更改删除时,它们可以重新挂载 发生。 将持久应用数据保存在组件外. 支持更新和声明删除保留文档编辑并取消历史. 自定义渲染不会改变保存的 DOCX 内容 . ## 常见问题 ### @docx-editor\.dev/react 是什么？ React DOCX 编辑器适配器,用于@docx-editor\.dev编辑器合同\. ### 如何安装 @docx-editor\.dev/react？ 在项目目录运行 npm install @docx-editor\.dev/react，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@docx-editor\.dev/core（~2\.37\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @docx-editor\.dev/react 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @docx-editor\.dev/react 支持 ESM 还是 CommonJS？ 同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。 ### @docx-editor\.dev/react 可以商用吗？ @docx-editor\.dev/react 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。 ### @docx-editor\.dev/react 的下载量有多少？ 根据 npm 官方下载统计，@docx-editor\.dev/react 在 2026/10/13 – 2026/11/11 这 30 天内被下载 516,920 次，日均约 17,231 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @docx-editor\.dev/react 还在维护吗？ 最新版本 2\.37\.0 发布于 2026/11/11（2 天前）；至今共发布 64 个版本，其中过去 12 个月发布了 64 个；首次发布于 2026/07/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。