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
| CommandId | Configurable State | Description |
|---|---|---|
| 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 |
| IsBestScale | true、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
| State | Description |
|---|---|
| defaultVisible | Display by default, will not modify user configuration; can be manually modified |
| defaultInvisible | Hidden by default, will not modify user configuration; can be manually modified |
| forceVisible | Force display, will not modify user configuration; cannot be manually modified |
| forceInvisible | Force hide, will not modify user configuration; cannot be manually modified |
| forceDisable | Force 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.