# @eigenpal/docx-editor-vue 中文文档

规范地址：https://npmcn.com/package/%40eigenpal/docx-editor-vue/

版本：1\.9\.0
npm 元数据更新时间：2026-06-29T21:05:01.416Z
中文译文更新时间：2026-11-13T09:39:12.807Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40eigenpal/docx-editor-vue
原文对照：https://npmcn.com/package/%40eigenpal/docx-editor-vue/?lang=original
项目主页：https://docx-editor.dev/
源码仓库：https://github.com/eigenpal/docx-editor

弃用说明：deprecated

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.1 MB，109 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：3 个
- peer 依赖：vue ^3\.3\.0，prosemirror-view ^1\.41\.6，prosemirror-model ^1\.19\.4，prosemirror-state ^1\.4\.3，prosemirror-keymap ^1\.2\.2，prosemirror-tables ^1\.8\.5，prosemirror-history ^1\.4\.0，prosemirror-commands ^1\.5\.2，prosemirror-transform ^1\.12\.0，prosemirror-dropcursor ^1\.8\.2
- 首次发布：2026-05-19T10:09:53.323Z
- 最新版本发布：2026-06-21T15:55:16.145Z
- 近 30 天下载量：13017（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 23 个）

## 中文简介

Vue 3 DOCX 编辑器适配器,用于@eigenpal/docx-editor-core.

## 安装

```sh
npm install @eigenpal/docx-editor-vue
```

也可以使用：`pnpm add @eigenpal/docx-editor-vue`、`yarn add @eigenpal/docx-editor-vue`、`bun add @eigenpal/docx-editor-vue`

## README

[![DOCX Editor — .docx in, .docx out. Open source, agent ready, client-side.](https://raw.githubusercontent.com/eigenpal/docx-editor/main/.github/assets/header.png)](https://www.docx-editor.dev/)

[![npm version](https://img.shields.io/npm/v/@eigenpal/docx-editor-vue.svg?style=flat-square&color=3B5BDB)](https://www.npmjs.com/package/@eigenpal/docx-editor-vue) [![npm downloads](https://img.shields.io/npm/dm/@eigenpal/docx-editor-vue.svg?style=flat-square&color=3B5BDB)](https://www.npmjs.com/package/@eigenpal/docx-editor-vue) [![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)

# @eigenpal/docx-editor-vue (英语)

Vue 3 适配器用于 [docx 编辑器](https://docx-editor.dev/)WYSIWYYG (英语) `.docx` 编辑时使用Cononical OOXML,跟踪变化,评论,以及AI代理桥.

## 快速启动

```bash
npm install @eigenpal/docx-editor-vue
```

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';

const buffer = ref<ArrayBuffer | null>(null);

async function loadFile(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  buffer.value = file ? await file.arrayBuffer() : null;
}
</script>

<template>
  <input type="file" accept=".docx" @change="loadFile" />
  <DocxEditor v-if="buffer" :document-buffer="buffer" mode="editing" />
</template>
```

在您的应用程序条目中导入样式表 。 Vite的库模式不会自动输入 CSS 导入,因此工具栏会不带它而变成无样式.

> **用Nuxt吗?** [`@eigenpal/nuxt-docx-editor`](https://www.npmjs.com/package/@eigenpal/nuxt-docx-editor) 将这个适配器包成 Nuxt 3 & 4 模块 —— SSR 安全组件注册,样式表自动被接线.

## 从空白文档开始

为新文档跳过文件拾取器 . `createEmptyDocument` 返回新鲜 `Document` 您可以直接传递给编辑器的模型 :

```vue
<script setup lang="ts">
import { ref } from 'vue';
import { DocxEditor, createEmptyDocument } from '@eigenpal/docx-editor-vue';
import '@eigenpal/docx-editor-vue/styles.css';

const doc = ref(createEmptyDocument());
// Or with options:
// createEmptyDocument({ initialText: 'Untitled', pageWidth: 12240 })
</script>

<template>
  <DocxEditor :document="doc" mode="editing" />
</template>
```

`createDocumentWithText(text, options?)` 也是同样的想法,开头的段落已经输入。 两名助手从 `@eigenpal/docx-editor-core` 所以,你不需要 一个单独的依赖.

## 软件包

| 软件包 | 说明 |
| --- | --- |
| [`@eigenpal/docx-editor-react`](https://www.npmjs.com/package/@eigenpal/docx-editor-react) | ![](https://cdn.simpleicons.org/react/61DAFB)   反应适配器. 工具栏 页面编辑器 插件. |
| [`@eigenpal/docx-editor-vue`](https://www.npmjs.com/package/@eigenpal/docx-editor-vue) | ![](https://cdn.simpleicons.org/vuedotjs/4FC08D)   Vue 3适配器. 工具栏 页面编辑器 插件. |
| [`@eigenpal/nuxt-docx-editor`](https://www.npmjs.com/package/@eigenpal/nuxt-docx-editor) | ![](https://cdn.simpleicons.org/nuxt/00DC82)   Nuxt 3 & 4 模块包装此适配器 . |
| [`@eigenpal/docx-editor-core`](https://www.npmjs.com/package/@eigenpal/docx-editor-core) | 框架-不可知核:OOXML 解析器,序列器,布局引擎,ProseMirror schema. 取决于此, 如果您要叉出反应或 Vue 适配器 . |
| [`@eigenpal/docx-editor-i18n`](https://www.npmjs.com/package/@eigenpal/docx-editor-i18n) | 两个适配器消耗的共享地块串和类型. |
| [`@eigenpal/docx-editor-agents`](https://www.npmjs.com/package/@eigenpal/docx-editor-agents) | 代理SDK和聊天UI:框架-不可知桥,MCP服务器,AI SDK适配器,外加React UI. |

> **伪造适配器?** 取出叉子细. 取决于 `@eigenpal/docx-editor-core` 直接如此解析器,序列器, 和渲染自动修复您的建筑中的地块, 不回转每个上游变化的手.

## 强制安装

```ts
import { renderAsync } from '@eigenpal/docx-editor-vue';

const editor = await renderAsync(file, document.getElementById('editor')!, { mode: 'editing' });
await editor.save();
editor.destroy();
```

## 子路径

-   `@eigenpal/docx-editor-vue` —— 说 `DocxEditor`, (中文(简体) ), `renderAsync`公共类型
-   `@eigenpal/docx-editor-vue/ui` – 工具栏原始人,拾取者,侧边栏,对话框
-   `@eigenpal/docx-editor-vue/composables` —— 说 `useDocxEditor`, (中文(简体) ), `useZoom`, (中文(简体) ), `useTableSelection`,, , , , , , , , .
-   `@eigenpal/docx-editor-vue/dialogs` 对话框 SFCs 桶
-   `@eigenpal/docx-editor-vue/plugin-api` — 插件主机和插件配置类型
-   `@eigenpal/docx-editor-vue/styles` ——风格常数(`EDITOR_CSS_PATH`,z指数)

## 组件 API

`DocxEditor` 财务报告和审定财务报表 `DocxEditorRef` 镜像回放适配器——相同的道具,出放,和回放方法,并互换了导入路径. 全文 : **[docx-editor.dev/docs/道具](https://www.docx-editor.dev/docs/props)**。 。 。 .

对于在您自己的 DOM 上安装的下层,请使用 `useDocxEditor` 可调和.

## 捐款

欢迎捐款。 见 [捐款额](https://github.com/eigenpal/docx-editor/blob/main/CONTRIBUTING.md) 用于设置,测试,以及一次性CLA签名.

## 商业支助

> \[TIP\] 问题还是习惯特征? 电子邮件 **[docx-编辑器@eigenpal.com](mailto:docx-editor@eigenpal.com)**。 。 。 .

## 常见问题

### @eigenpal/docx-editor-vue 是什么？

Vue 3 DOCX 编辑器适配器,用于@eigenpal/docx-editor-core\.注意：该包已被作者标记为弃用——deprecated

### 如何安装 @eigenpal/docx-editor-vue？

在项目目录运行 npm install @eigenpal/docx-editor-vue，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.3\.0）、prosemirror-view（^1\.41\.6）、prosemirror-model（^1\.19\.4）、prosemirror-state（^1\.4\.3）、prosemirror-keymap（^1\.2\.2）、prosemirror-tables（^1\.8\.5）、prosemirror-history（^1\.4\.0）、prosemirror-commands（^1\.5\.2）、prosemirror-transform（^1\.12\.0）、prosemirror-dropcursor（^1\.8\.2）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @eigenpal/docx-editor-vue 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @eigenpal/docx-editor-vue 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @eigenpal/docx-editor-vue 可以商用吗？

@eigenpal/docx-editor-vue 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @eigenpal/docx-editor-vue 的下载量有多少？

根据 npm 官方下载统计，@eigenpal/docx-editor-vue 在 2026/10/13 – 2026/11/11 这 30 天内被下载 13,017 次，日均约 434 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @eigenpal/docx-editor-vue 还在维护吗？

最新版本 1\.9\.0 发布于 2026/06/21（4 个月前）；至今共发布 23 个版本，其中过去 12 个月发布了 23 个；首次发布于 2026/05/19。作者已将其标记为弃用，新项目建议寻找替代方案。