@docx-editor.dev/反应
一个视觉 .docx react 编辑器 。 打开 DOCX 文档,编辑其相接版式,并保存 DOCX 文件. 解析和序列化在浏览器中运行.
保存保存未被移动的内容、不支持的OOXML和包的有效载荷。 连续集成(CI)检查文档结构和保存再开放行为.
安装适配器及其所需的引擎端点 :
npm install @docx-editor.dev/react @docx-editor.dev/core
特征
- 打开、编辑并保存文档。 。 。 .
- 编写您的编辑界面。 。 。 .
- 通过钩子连接控制。 。 。 .
- 翻译编辑器控件。 。 。 .
快开始
导入样式表一次, 并给编辑器一个有定义高度的容器 :
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<Uint8Array>();
return (
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
<input
type="file"
accept=".docx"
onChange={async (e) => {
const file = e.target.files?.[0];
setDoc(file ? new Uint8Array(await file.arrayBuffer()) : undefined);
}}
/>
<div style={{ flex: 1, minHeight: 0 }}>
{doc && <DocxEditor document={doc} mode="edit" />}
</div>
</div>
);
}
<DocxEditor> 包括标题栏、菜单、工具栏、导航窗格、上下文菜单和文档页面。 它装满了母容器.
对于Next.js和服务器侧渲染(SSR),在浏览器中加载编辑器. 使用 dynamic(..., { ssr: false }) 在客户端组件内.
构建自己的用户界面
使用组件和钩来构建自己的控制. 被包控件使用相同的公用API.
import { DocxEditor, useEditorCommand } from '@docx-editor.dev/react';
function BoldButton() {
const bold = useEditorCommand('text.bold');
return (
<button
onMouseDown={(e) => e.preventDefault()} // chrome must not steal the caret
onClick={() => bold.execute()}
disabled={!bold.isEnabled}
data-active={bold.isActive || undefined}
>
Bold
</button>
);
}
export function Editor({ bytes }: { bytes: Uint8Array }) {
return (
<DocxEditor.Root document={bytes}>
<BoldButton />
<DocxEditor.Viewport>
<DocxEditor.Content />
</DocxEditor.Viewport>
</DocxEditor.Root>
);
}
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——被跟踪的更改,注释,自定义节点@docx-editor.dev/editor-api– Office.js API 支持的子集,用于服务器和浏览器编辑@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) | 文件自动化 |
|---|---|---|
| 对已找到文本的评论 | editor.findMatches, (中文(简体) ), editor.selectMatch,则 useReview().comment | body.search,则 Range.insertComment |
| 对线索的答复 | useReview().reply(item, text) | Comment.reply(text) |
| 记录跟踪替换 | 那么建议模式 editor.exec({ type: 'replaceMatch', match, text }) | document.changeTrackingMode = 'TrackMineOnly',则 Range.insertText(text, 'Replace') |
| 提议将AI重写为已跟踪的更改 | prepareRewrite 结束 DocxEditor.createBrowser | prepareRewrite 从 @docx-editor.dev/editor-api/agent |
| 接受或拒绝更改 | useReview().accept(item) 或者说 useReview().reject(item) | Revision.accept() 或者说 Revision.reject() |
| 不滚动打开更改 | useReview().setActive(key, { reveal: false }) | 不适用:无取景口 |
| 突出显示区域 | useHighlights(name, source, options) | 不适用 |
| 自定义审查铁路卡 | DocxEditorReview 与 preset 设置为 false, (中文(简体) ), useStackedReviewPositions,以及 useReviewRailMetrics | 不适用 |
| 关于选择的注释按钮 | DocxEditorReview.AddComment 作为直系儿童 DocxEditorReview,或 useEditorCommand('review.addComment') | 不适用 |
| 页面设置和段落对话框 | DocxEditor.PageSetupDialog 或者说 DocxEditor.ParagraphDialog | Section.pageSetup,以及 Paragraph 属性,例如 alignment |
这个包装了任务秘方 docs/index.md.这些网站还有: 任务配方。 。 。 .
文档
许可证
阿帕奇 - 2.0
自定义不支持的内容
登记组件 DocxEditor 或者说 DocxEditor.Root。每项声明
处理匹配不支持的内容,包括不透明的内线和块元素.
<DocxEditor document={bytes}>
<DocxEditor.UnsupportedElement
match={(element) => element.namespaceUri === 'urn:my-widgets'}
layout={{ width: 180, height: 48 }}
>
{({ element }) => <MyWidget element={element} />}
</DocxEditor.UnsupportedElement>
<DocxEditor.UnsupportedElement>
{({ element }) => <MyPlaceholder label={element.label} />}
</DocxEditor.UnsupportedElement>
</DocxEditor>
首个挂载匹配声明取胜. 提案更新保留其优先级.
取消和提出宣言再次给予后来的优先地位。 要禁用一个
特定渲染器暂时挂起并更改 match,或使用
匹配的不重复.
奥米 match 为了一个全面。 在上游使用源元数据; 几何不是
在页形之前可用 。 返回时 null 以保留默认占位符.
空结果不选择下一个声明 .
UnsupportedElement 曝光情况 nodeId, (中文(简体) ), ownerPartName, (中文(简体) ), namespaceUri, (中文(简体) ),
localName, (中文(简体) ), source, (中文(简体) ), placement,以及 label。 。 。 . bounds 描述保留的
框的后框。 可选 drawing 财务报告和审定财务报表 equation 提供专门记录
元数据。 将源内容视为只读且不可信 .
layout 在文档点中保留不透明元素的宽度和高度.
源入会决定内入或块流. 无 layout,不透明
内线元素预留120×24分;区块预留240×96分.
尺寸必须是正的、有限度的,最多10万分.
绘图和等式回落保留了现有的几何学.
无比不透明的内容保留了它现有的隐形行为.
没有支持的元素中的属性、元数据和嵌入有效载荷不
独立内容事件.
组成部分保留框架背景和同一页再油漆的当地状态. 当页化、虚拟化或文档更改删除时,它们可以重新挂载 发生。 将持久应用数据保存在组件外. 支持更新和声明删除保留文档编辑并取消历史. 自定义渲染不会改变保存的 DOCX 内容 .