@eigenpal/docx-editor-反应
反应适配器 docx 编辑器WYSIWYYG (英语) .docx 由Cononical OOXML编辑,跟踪更改,评论,实时协作,以及AI代理桥.
快速启动
npm install @eigenpal/docx-editor-react
import { useState } from 'react';
import { DocxEditor } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';
export function App() {
const [buffer, setBuffer] = useState<ArrayBuffer | null>(null);
return (
<>
<input
type="file"
accept=".docx"
onChange={async (e) => setBuffer((await e.target.files?.[0]?.arrayBuffer()) ?? null)}
/>
{buffer && <DocxEditor documentBuffer={buffer} mode="editing" />}
</>
);
}
下一个.js/安保部门改革: 使用动态导入 。 编辑需要DOM.
从空白文档开始
为新文档跳过文件拾取器 . createEmptyDocument 返回新鲜 Document 您可以直接传递给编辑器的模型 :
import { DocxEditor, createEmptyDocument } from '@eigenpal/docx-editor-react';
import '@eigenpal/docx-editor-react/styles.css';
const doc = createEmptyDocument();
// Or with options:
// createEmptyDocument({ initialText: 'Untitled', pageWidth: 12240 })
<DocxEditor document={doc} mode="editing" />;
createDocumentWithText(text, options?) 也是同样的想法,开头的段落已经输入。 两名助手从 @eigenpal/docx-editor-core 所以,你不需要 一个单独的依赖.
自定义文件 > 打开
默认情况下,内置 File > Open 和 Cmd/Ctrl+O 催化 .docx 文件并装入本地编辑器视图。 过 onOpen 来保留本地文件拾取器,但路径 File 通过您自己的进口管道:
<DocxEditor
document={doc}
externalContent
externalPlugins={plugins}
onOpen={async (file) => {
await importIntoBackend(file);
}}
/>
设定 showFileOpen={false} 以隐藏内置的打开项目并离开 Cmd/Ctrl+ O为您自己的菜单或工具栏.
软件包
| 软件包 | 说明 |
|---|---|
@eigenpal/docx-editor-react |  反应适配器. 工具栏 页面编辑器 插件. |
@eigenpal/docx-editor-vue |  Vue 3适配器. 工具栏 页面编辑器 插件. |
@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-react';
const editor = await renderAsync(file, document.getElementById('editor')!, { mode: 'editing' });
await editor.save();
editor.destroy();
子路径
@eigenpal/docx-editor-react—— 说DocxEditor, (中文(简体) ),renderAsync公共类型@eigenpal/docx-editor-react/ui– 工具栏原始人,拾取者,侧边栏,对话框@eigenpal/docx-editor-react/hooks—— 说useAutoSave, (中文(简体) ),useTableSelection,, , , , , , , , .@eigenpal/docx-editor-react/dialogs- 对话框组件桶@eigenpal/docx-editor-react/plugin-api— 插件主机和插件配置类型@eigenpal/docx-editor-react/styles——风格常数(EDITOR_CSS_PATH,z指数)
插件
import { DocxEditor } from '@eigenpal/docx-editor-react';
import { PluginHost, templatePlugin } from '@eigenpal/docx-editor-react/plugin-api';
<PluginHost plugins={[templatePlugin]}>
<DocxEditor documentBuffer={buffer} />
</PluginHost>;
组件 API
完整道具和参考文献: docx-editor.dev/docs/道具。 。 。 . DocxEditor 财务报告和审定财务报表 DocxEditorRef 镜像 Vue 适配器, 因此只应用已互换的导入路径 .
@eigenpal/docx-editor-core 以中转方式安装。 把它加进你的 package.json 只有您自己的代码直接导入核心 API 。 严格安装器, 如 pnpm , 已禁用相机自动安装 , 也可能需要 ProseMirror 的相机 package.json。 。 。 .
实例: 维特 • 妇女 下一个.js • 妇女 重混合 • 妇女 天体
捐款
欢迎捐款。 见 捐款额 用于设置,测试,以及一次性CLA签名.
商业支助
[TIP] 问题还是习惯特征? 电子邮件 docx-编辑器@eigenpal.com。 。 。 .