ComPDF
联系销售
DemoAPI 参考文档FAQ
、

PDF 生成模板编辑器

开源可视化 PDF 生成引擎，支持自定义模板，并提供面向开发者的 API，灵活构建文档生成流程。

查看 GitHub

内容编辑 ​

内容编辑器允许用户直接在 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）：

  1. 调用 core.saveDocumentEdit() 获取 newUrl；为假则提前返回。
  2. 重置编辑器状态：useDocument.resetSetting()、useDocument.setToolState('')。
  3. 将查看器切回视图模式：setActiveToolMode('view')、setToolbarGroup('toolbarGroup-View')、setActiveHeaderGroup('default')。
  4. 触发上传（setUpload(true)、setUploadLoading(true)），保留旧缩放。
  5. 设置 useDocument.setCurrentPdfData(newUrl)，通过 core.getPagesCount() 刷新 totalPages，通过 core.getOutlines() 刷新书签，页码重置为 1。
  6. 通过 core.switchScrollMode / core.switchSpreadMode / core.scaleChanged 重新应用滚动/分页模式和缩放。
  7. setUploadLoading(false)。

内容编辑器状态 ​

Store字段用途
viewercontentEditorType编辑器类型（'text'）。
viewerdocumentEditorSaveStatus / documentEditorSaveAsStatus保存/另存为可用性。
documentdocumentEditor{ operationList[], pageList[], selectedPageList[] }。
documentcanUndo / 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();

相关 ​