内容编辑
内容编辑器允许用户直接在 PDF 页面上编辑文本和图片——添加文本、添加图片、修改现有内容。它由引擎的 content_edit_manager 协调,配有专用历史管理器,通过 core 桥接层暴露给 UI。
内容编辑引擎位于闭源 Core(
packages/core/src/editor/)。UI 层通过桥接层驱动并在 store 中镜像状态。
UI API
启用/禁用保存/另存为
javascript
UI.disableDocumentEditorSave(); // useViewer.setDocumentEditorSaveStatus(false)
UI.enableDocumentEditorSave(); // useViewer.setDocumentEditorSaveStatus(true)
UI.disableDocumentEditorSaveAs(); // useViewer.setDocumentEditorSaveAsStatus(false)
UI.enableDocumentEditorSaveAs(); // useViewer.setDocumentEditorSaveAsStatus(true)切换 viewer store 中的 documentEditorSaveStatus / documentEditorSaveAsStatus 标志,控制文档编辑器中保存/另存为是否可用。
UI.saveDocumentEditor()(异步)
持久化文档编辑器更改并重新加载文档。
javascript
await UI.saveDocumentEditor();内部(apis/saveDocumentEditor.js):
- 调用
core.saveDocumentEdit()获取newUrl;为假则提前返回。 - 重置编辑器状态:
useDocument.resetSetting()、useDocument.setToolState('')。 - 将查看器切回视图模式:
setActiveToolMode('view')、setToolbarGroup('toolbarGroup-View')、setActiveHeaderGroup('default')。 - 触发上传(
setUpload(true)、setUploadLoading(true)),保留旧缩放。 - 设置
useDocument.setCurrentPdfData(newUrl),通过core.getPagesCount()刷新totalPages,通过core.getOutlines()刷新书签,页码重置为 1。 - 通过
core.switchScrollMode/core.switchSpreadMode/core.scaleChanged重新应用滚动/分页模式和缩放。 setUploadLoading(false)。
内容编辑器状态
| Store | 字段 | 用途 |
|---|---|---|
| viewer | contentEditorType | 编辑器类型('text')。 |
| viewer | documentEditorSaveStatus / documentEditorSaveAsStatus | 保存/另存为可用性。 |
| document | documentEditor | { operationList[], pageList[], selectedPageList[] }。 |
| document | canUndo / canRedo | { content, annotation } 撤销/重做标志。 |
useHistoryListener(HeaderItemsListener.js)将引擎的 contentEditHistoryChanged / historyChanged 事件桥接到 useDocument.setCanUndo / setCanRedo。
内容编辑器组件
DocumentEditorContainer——页面编辑器界面,在活动工具模式为document时显示。ContentEditorPanel——内容编辑器选择属性(右面板,即时加载)。ContentEditorToolBar——内容编辑器工具栏。ContentEditorPopup——内容编辑器右键菜单(见 弹出菜单)。
相关对话框:ContentEditorPreventDialog、DocEditorPreventDialog。
Core 桥接层(内容编辑接口)
core 桥接层在 instance.Core 上暴露:
| 函数 | 用途 |
|---|---|
switchAnnotationEditorMode | 切换编辑器模式。 |
setContentEditorProperty | 设置内容编辑器属性。 |
getContentEditManager | 获取内容编辑协调器。 |
getContentEditHistoryManager | 获取内容编辑历史管理器。 |
addEditorImage | 向编辑器添加图片。 |
getCropedPageImage | 获取裁剪后的页面图片。 |
saveDocumentEdit | 保存编辑并返回新 URL。 |
示例
在编辑器中禁用另存为
javascript
UI.disableDocumentEditorSaveAs();保存并重新加载
javascript
await UI.saveDocumentEditor();