配置参数

配置参数

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

1.挂载文档过程中可以通过第四个参数 config 来控制显示、隐藏页面组件以及其他自定义设置 2.可以通过给Filez文档url添加 query 的方式来进行自定义设置

UI组件显示状态控制

uiConfig 参数用来控制显示、隐藏页面组件

可定制列表

CommandId	可配置状态	说明
WordCommentBox	'defaultVisible'、'defaultInvisible'	文档主体右侧批注区域
WordCommentMark	'defaultVisible'、'defaultInvisible'	批注标记
WordTableGridLine	'defaultVisible'、'defaultInvisible'	表格虚框（仅编辑模式下可用）
WordGridline	'defaultVisible'、'defaultInvisible'	网格线（仅编辑模式下可用）
CarriageReturn	'defaultVisible'、'defaultInvisible'	格式化标记（仅编辑模式下可用）
Bookmark	'defaultVisible'、'defaultInvisible'	书签标记（仅编辑模式下可用）
WordPermMark	'defaultVisible'、'defaultInvisible'	可编辑区域标记（仅编辑模式下可用）
NaviPanel	'defaultVisible'、'defaultInvisible'、'forceInvisible'	导航栏的展开、收起、隐藏
IsBestScale	true、false、'true'、'false'	是否以最佳比例显示
save	'defaultEnable'、'defaultDisable'	是否禁用保存('defaultDisable':禁用)（仅编辑模式下可用）
CommentSideBar	'defaultVisible'、'defaultInvisible'	显示批注侧边栏（仅编辑模式下可用）
IntellBookmarkSideBar	'defaultVisible'、'defaultInvisible'	显示智能书签侧边栏（仅编辑模式下可用）
FormEntryPanel	'defaultVisible'、'defaultInvisible'	显示表单输入侧边栏（仅编辑模式下可用）
OperationRecordSideBar	'defaultVisible'、'defaultInvisible'	显示协作记录侧边栏（仅编辑模式下可用）
ProtectSideBar	'defaultVisible'、'defaultInvisible'	显示保护设置侧边栏（仅编辑模式下可用）
TrackChangeSideBar	'defaultVisible'、'defaultInvisible'	显示修订记录侧边栏（仅编辑模式下可用）
EfficiencyMenu	'defaultVisible'、'defaultInvisible'	菜单栏是否显示效率菜单（仅编辑模式下可用）
AutoFormatMenuItem	'defaultVisible'、'defaultInvisible'	格式菜单是否显示一键排版菜单项（仅编辑模式下可用）
RevisionActions	'forceVisible'、'forceInvisible'	修订接受&拒绝是否显示（仅编辑模式下可用）
TrackChangeSwitch	'forceDisable'	修订开关是否可用（仅编辑模式下可用）
CommentDeleteAction	'forceVisible'、'forceInvisible'	批注删除按钮是否显示（仅编辑模式下可用）
SideBar	'defaultVisible'、'defaultInvisible'	侧边栏（仅编辑模式下可用）
ToolBar	'defaultVisible'、'defaultInvisible'	工具栏（仅编辑模式下可用）
FormulaBar	'defaultVisible'、'defaultInvisible'	公式栏（仅编辑模式下可用）
PdfNaviPanel	'defaultVisible'、'defaultInvisible'	PDF 导航栏
WdRevisionViewType	Writer.WdRevisionViewType	默认修订模式（JSSDK: 1.10.2、FilezOffice v8.2 FP2 支持）

可配置状态说明

状态	说明
defaultVisible	默认显示，不会修改用户配置；可手动修改
defaultInvisible	默认隐藏，不会修改用户配置；可手动修改
forceVisible	强制显示，不会修改用户配置；不可手动修改
forceInvisible	强制隐藏，不会修改用户配置；不可手动修改
forceDisable	强制禁用，不会修改用户配置；不可手动修改

示例-SDK配置

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: 'defaultVisible'	// 显示文档主体右侧批注区域
    }
});

示例-url query 配置

// 使用SDK
const Application = await ZOfficeSDK.mount('http://172.16.22.98/docs/app/thirdparty-rest/1347466381985058817/edit/content?zdocs_access_token=653b90d845a785e3c69aeba?WordCommentBox=defaultVisible', '#doc1', true);

// 不用SDK
  <div id='doc1' class='doc-container'>
    <iframe src='http://172.16.22.98/docs/app/thirdparty-rest/1347466381985058817/edit/content?zdocs_access_token=653b90d845a785e3c69aeba?WordCommentBox=defaultVisible' frameborder='0'></iframe>
  </div>

插件定制

JSSDK: 1.11.0、zOffice V8.3 支持

extensionConfig 参数用来自定义元素，可以在文档特定位置添加 UI 控件，如右键菜单、菜单栏、工具栏、状态栏等。

命令配置

extensionCommands 字段用来配置命令（UI 控件点击后执行的命令）。

字段名	类型	必填	描述
extensionCommands	extensionCommand[]	是	扩展命令数组，同一个命令可对应多个 UI 控件

extensionCommand 格式

字段名	类型	必填	描述
id	string	是	命令 ID，不能重复
execFunc	Function	是	命令触发时执行的函数

UI 控件定制

extensionPoints 字段用来定制 UI 控件。

字段名	类型	必填	描述
extensionPoints	Object	是	UI 扩展点

Menubar

字段名	类型	必填	描述
menubar	Menubar[]	是	menubar 菜单项定制

Menubar 格式

字段名	类型	必填	描述
id	string	是	指定领域的菜单栏
position	string	否	默认 "bottom"，"top" 则显示在菜单上方
items	MenuItem[]	是	菜单项列表

Menubar id 列表

id	描述
'writer-menubar-edit'	文字文档Menubar：编辑
'writer-menubar-insert'	文字文档Menubar：插入
'writer-menubar-format'	文字文档Menubar：格式
'writer-menubar-view'	文字文档Menubar：视图
'writer-menubar-team'	文字文档Menubar：协同
'writer-menubar-efficiency'	文字文档Menubar：效率
'sheet-menubar-edit'	电子表格Menubar：编辑
'sheet-menubar-insert'	电子表格Menubar：插入
'sheet-menubar-data'	电子表格Menubar：数据
'sheet-menubar-view'	电子表格Menubar：视图
'sheet-menubar-team'	电子表格Menubar：协同

MenuItem 格式

字段名	类型	必填	描述
action	string	是	命令 ID，对应 extensionCommand 的 id
name	string	是	菜单项显示名称
icon	string	否	菜单项图标，base64 格式
payload	Object	否	点击菜单项后，传递给回调函数的参数
type	string	否	菜单项类型，设置分割线时传 "Divider"，其他参数都不需要传
items	MenuItem[]	否	子菜单配置

示例

const config = {
  extensionConfig: {
    extensionCommands: [
      {
        id: 'getSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const text = await range.getText();
          console.log(`选区文字内容：${text}`);
        }
      },
      {
        id: 'replaceSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const success = await range.setText(payload.text);
          console.log(`替换选区内容：${success}`);
        }
      }
    ],
    extensionPoints: {
      menubar: [
        {
          id: "writer-menubar-insert",
          position: 'top',
          items: [
            {
              name: '父菜单',
              icon: '',
              items: [
                {
                  action: 'getSelectedText',
                  name: '获取选区文字内容',
                  icon: ''
                },
                {
                  action: 'replaceSelectedText',
                  name: '替换选区内容',
                  icon: '',
                  payload: {
                    text: '替换文本'
                  }
                }
              ]
            },
          ]
        }
      ]
    }
  }
};

FileMenu

字段名	类型	必填	描述
fileMenu	FileMenu[]	是	fileMenu 菜单项定制

FileMenu 格式

字段名	类型	必填	描述
id	string	是	指定文档的 fileMenu
position	string	否	默认 "bottom"，"top" 则显示在上方
items	MenuItem[]	是	菜单项列表

FileMenu id 列表

id	描述
'writer-fileMenu'	文字文档FileMenu
'sheet-fileMenu'	电子表格FileMenu

MenuItem 格式

字段名	类型	必填	描述
action	string	是	命令 ID，对应 extensionCommand 的 id
name	string	是	菜单项显示名称
icon	string	否	菜单项图标，base64 格式
payload	Object	否	点击菜单项后，传递给回调函数的参数

示例

const config = {
  extensionConfig: {
    extensionCommands: [
      {
        id: 'getSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const text = await range.getText();
          console.log(`选区文字内容：${text}`);
        }
      }
    ],
    extensionPoints: {
      fileMenu: [
        {
          id: "writer-fileMenu",
          position: 'bottom',
          items: [
            {
              action: 'getSelectedText',
              name: '获取选区文字内容',
              icon: ''
            }
          ]
        }
      ]
    }
  }
};

Toolbar

字段名	类型	必填	描述
toolbar	Toolbar[]	是	toolbar 按钮定制

Toolbar 格式

字段名	类型	必填	描述
id	string	是	文档上方的工具栏
position	string	否	默认 "right"
items	MenuItem[]	是	菜单项列表

Toolbar id 列表

id	描述
'writer-toolbar'	文字文档Toolbar
'sheet-toolbar'	电子表格Toolbar

MenuItem 格式

字段名	类型	必填	描述
action	string	是	命令 ID，对应 extensionCommand 的 id
name	string	否	菜单项显示名称
icon	string	否	菜单项图标，base64 格式
payload	Object	否	点击菜单项后，传递给回调函数的参数

示例

const config = {
  extensionConfig: {
    extensionCommands: [
      {
        id: 'getSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const text = await range.getText();
          console.log(`选区文字内容：${text}`);
        }
      },
      {
        id: 'replaceSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const success = await range.setText(payload.text);
          console.log(`替换选区内容：${success}`);
        }
      }
    ],
    extensionPoints: {
      toolbar: [
        {
          id: "writer-toolbar",
          position: 'right',
          items: [
            {
              name: '工具按钮',
              icon: '',
              items: [
                {
                  action: 'getSelectedText',
                  name: '获取选区文字内容',
                  icon: ''
                },
                {
                  action: 'replaceSelectedText',
                  name: '替换选区内容',
                  icon: ''
                }
              ]
            }
          ]
        }
      ]
    }
  }
};

Contextmenu

字段名	类型	必填	描述
contextmenu	Contextmenu[]	是	contextmenu 菜单项定制

Contextmenu 格式

字段名	类型	必填	描述
id	string	是	指定领域的右键菜单
position	string	否	默认 "bottom"，"top" 则显示在菜单上方
items	MenuItem[]	是	菜单项列表

Contextmenu id 列表

id	描述
'writer-main-context'	文字文档正文右键菜单
'writer-slash-context'	文字文档左斜线扩展菜单
'sheet-cell-context'	电子表格单元格右键菜单

MenuItem 格式

字段名	类型	必填	描述
action	string	是	命令 ID，对应 extensionCommand 的 id
name	string	是	菜单项显示名称
icon	string	否	菜单项图标，base64 格式
payload	Object	否	点击菜单项后，传递给回调函数的参数
type	string	否	菜单项类型，设置分割线时传 "Divider"，其他参数都不需要传
items	MenuItem[]	否	子菜单配置（"writer-slash-context" 不支持）

示例

const config = {
  extensionConfig: {
    extensionCommands: [
      {
        id: 'getSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const text = await range.getText();
          console.log(`选区文字内容：${text}`);
        }
      },
      {
        id: 'replaceSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const success = await range.setText(payload.text);
          console.log(`替换选区内容：${success}`);
        }
      }
    ],
    extensionPoints: {
      contextmenu: [
        {
          id: "writer-main-context",
          position: 'top',
          items: [
            {
              name: '父菜单',
              icon: '',
              items: [
                {
                  action: 'getSelectedText',
                  name: '获取选区文字内容',
                  icon: ''
                },
                {
                  action: 'replaceSelectedText',
                  name: '替换选区内容',
                  icon: '',
                  payload: {
                    text: '替换文本'
                  }
                }
              ]
            },
          ]
        },
        {
          id: "writer-slash-context",
          position: 'top',
          items: [
            {
              action: 'getSelectedText',
              name: '获取选区文字内容',
              icon: ''
            }
          ]
        }
      ]
    }
  }
};

Statusbar

字段名	类型	必填	描述
statusbar	Statusbar[]	是	statusbar 按钮定制

Statusbar 格式

字段名	类型	必填	描述
id	string	是	文档下方的状态栏
position	string	否	默认 "right"，"left" 则显示在左侧
items	MenuItem[]	是	菜单项列表

Statusbar id 列表

id	描述
'writer-statusbar'	文字文档编辑模式的Statusbar
'writer-view-statusbar'	文字文档预览模式的Statusbar

MenuItem 格式

字段名	类型	必填	描述
action	string	是	命令 ID，对应 extensionCommand 的 id
description	string	否	菜单项 hover 后显示的提示词
icon	string	否	菜单项图标，base64 格式
payload	Object	否	点击菜单项后，传递给回调函数的参数

示例

const config = {
  extensionConfig: {
    extensionCommands: [
      {
        id: 'getSelectedText',
        execFunc: async (payload) => {
          const range = await app1.ActiveDocument.getSelection();
          const text = await range.getText();
          console.log(`选区文字内容：${text}`);
        }
      }
    ],
    extensionPoints: {
      statusbar: [
        {
          id: "writer-view-statusbar",
          position: 'left',
          items: [
            {
              action: 'getSelectedText',
              description: '获取选区文字内容',
              icon: ''
            }
          ]
        }
      ]
    }
  }
};