@eigenpal/docx-editor-vue (英语)
Vue 3 适配器用于 docx 编辑器WYSIWYYG (英语) .docx 编辑时使用Cononical OOXML,跟踪变化,评论,以及AI代理桥.
快速启动
npm install @eigenpal/docx-editor-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将这个适配器包成 Nuxt 3 & 4 模块 —— SSR 安全组件注册,样式表自动被接线.
从空白文档开始
为新文档跳过文件拾取器 . createEmptyDocument 返回新鲜 Document 您可以直接传递给编辑器的模型 :
<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 |  反应适配器. 工具栏 页面编辑器 插件. |
@eigenpal/docx-editor-vue |  Vue 3适配器. 工具栏 页面编辑器 插件. |
@eigenpal/nuxt-docx-editor |  Nuxt 3 & 4 模块包装此适配器 . |
@eigenpal/docx-editor-core | 框架-不可知核:OOXML 解析器,序列器,布局引擎,ProseMirror schema. 取决于此, 如果您要叉出反应或 Vue 适配器 . |
@eigenpal/docx-editor-i18n | 两个适配器消耗的共享地块串和类型. |
@eigenpal/docx-editor-agents | 代理SDK和聊天UI:框架-不可知桥,MCP服务器,AI SDK适配器,外加React UI. |
伪造适配器? 取出叉子细. 取决于
@eigenpal/docx-editor-core直接如此解析器,序列器, 和渲染自动修复您的建筑中的地块, 不回转每个上游变化的手.
强制安装
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/道具。 。 。 .
对于在您自己的 DOM 上安装的下层,请使用 useDocxEditor 可调和.
捐款
欢迎捐款。 见 捐款额 用于设置,测试,以及一次性CLA签名.
商业支助
[TIP] 问题还是习惯特征? 电子邮件 docx-编辑器@eigenpal.com。 。 。 .