Skip to main content

Basic Usage

Configuration Parameters

ZOfficeSDK.mount(url, selector, bAsync, config)

During the document mounting process, you can control the display, hiding of page components, and other custom settings through the fourth parameter config

UI Component Display State Control

The uiConfig parameter is used to control the display and hiding of page components

Customizable List

CommandIdConfigurable StateDescription
WordCommentBox'defaultVisible'、'defaultInvisible'Comment area on the right side of the document body (only available in edit mode)
WordCommentMark'defaultVisible'、'defaultInvisible'Comment mark (only available in edit mode)
WordRevisionMark'defaultVisible'、'defaultInvisible'Revision mark (only available in edit mode)
WordTableGridLine'defaultVisible'、'defaultInvisible'Table grid lines (only available in edit mode)
WordGridline'defaultVisible'、'defaultInvisible'Grid lines (only available in edit mode)
CarriageReturn'defaultVisible'、'defaultInvisible'Formatting marks (only available in edit mode)
Bookmark'defaultVisible'、'defaultInvisible'Bookmark marks (only available in edit mode)
WordPermMark'defaultVisible'、'defaultInvisible'Editable area (only available in edit mode)
NaviPanel'defaultVisible'、'defaultInvisible'Navigation panel
IsBestScaletrue、false、'true'、'false'Whether to display at best scale
save'defaultEnable'、'defaultDisable'Whether to disable save ('defaultDisable': disabled)
CommentSideBar'defaultVisible'、'defaultInvisible'Whether to display comment sidebar on the right side of document body by default (only available in edit mode)
IntellBookmarkSideBar'defaultVisible'、'defaultInvisible'Whether to display intelligent bookmark sidebar on the right side of document body by default (only available in edit mode)
FormEntryPanel'defaultVisible'、'defaultInvisible'Whether to display form input sidebar on the right side of document body by default (only available in edit mode)
OperationRecordSideBar'defaultVisible'、'defaultInvisible'Whether to display collaboration record sidebar on the right side of document body by default (only available in edit mode)
ProtectSideBar'defaultVisible'、'defaultInvisible'Whether to display protection settings sidebar on the right side of document body by default (only available in edit mode)
TrackChangeSideBar'defaultVisible'、'defaultInvisible'Whether to display revision record sidebar on the right side of document body by default (only available in edit mode)
EfficiencyMenu'defaultVisible'、'defaultInvisible'Whether to display efficiency menu in menu bar (only available in edit mode)
AutoFormatMenuItem'defaultVisible'、'defaultInvisible'Whether to display one-click formatting menu item in format menu (only available in edit mode)
RevisionActions'forceVisible'、'forceInvisible'Whether to display revision accept & reject (only available in edit mode)
TrackChangeSwitch'forceDisable'Whether revision switch is available (only available in edit mode)
SideBar'defaultVisible'、'defaultInvisible'Sidebar
ToolBar'defaultVisible'、'defaultInvisible'Toolbar
FormulaBar'defaultVisible'、'defaultInvisible'Formula bar
PdfNaviPanel'defaultVisible'、'defaultInvisible'PDF navigation panel

Configurable State Description

StateDescription
defaultVisibleDisplay by default, will not modify user configuration; can be manually modified
defaultInvisibleHidden by default, will not modify user configuration; can be manually modified
forceVisibleForce display, will not modify user configuration; cannot be manually modified
forceInvisibleForce hide, will not modify user configuration; cannot be manually modified
forceDisableForce disable, will not modify user configuration; cannot be manually modified

Example

const Application = await ZOfficeSDK.mount('http://172.16.22.98/docs/app/thirdparty-rest/1347466381985058817/edit/content?zdocs_access_token=653b90d845a785e3c69aeba', '#doc1', true, {
uiConfig: {
WordCommentBox: 'defaultInvisible' // Hide comment area on the right side of document body
}
});

Common

SDK Version

You can view the current SDK version through version.

Example

const version = ZOfficeSDK.version;

All Document Type Application Objects

Get all document type application objects corresponding to mounted documents

Applications: Map<selector, Application>

  • selector: Selector of the DOM node where the document is mounted, consistent with the selector passed during mount
  • Application: Document type application object

Example

const Applications = ZOfficeSDK.Applications;
const Application1 = ZOfficeSDK.Applications.get('#doc1'); // '#doc1' is the selector of the DOM node where the document is mounted

Configuration Notes

UI component configuration can help you customize the document editing interface according to business needs and improve user experience.