Intelligent Media Management:Parameter configuration

How to configure parameters

aliyun.config({
  url: 'Address for online preview or editing',
  // Other configuration parameters. 
})

Parameters

The following table lists the supported configuration parameters.

Display mode

Configure the mode parameter to set the display mode.

• Example

  aliyun.config({
    mode: 'normal',
  });

• Description

  Parameter	Description
  mode	The display mode. Valid values: normal: the normal mode. In this mode, all features are displayed. This is the default value. simple: the simple mode. In this mode, the header and toolbar are not displayed.

Page customization

Configure the commandBars parameter to hide, show, disable, or enable page components.

• Example

  The following sample code hides the button in the upper-left corner of the page.

  aliyun.config({
    // You can configure the status of multiple components at the same time. 
    commandBars: [
      {
        cmbId: 'HeaderLeft', // The component ID. 
        attributes: {
          visible: false, // Hide the component. 
          enable: false, // Disable the component. The component is displayed but does not respond to click events. 
        },
      },
    ],
  })

• Notes

  • The cmbId parameter represents the component ID. For more information about component IDs, see Customizable components.

  • The following table describes the attributes parameter that is used to set the component status.

    Parameter	Type	Description
    visible	boolean	Specifies whether to display the component. Valid values: true: displays the component. false: does not display the component.
    enable	boolean	Specifies whether to enable the component. Valid values: true: enables the component. false: disables the component. The component is displayed but does not respond to click events.

Dynamically update the component status

Besides the configurations that take effect only during initialization, JS-SDK also provides an API operation to dynamically update the component status. See the following sample code:

const instance = aliyun.config({
  // ...
})

instance.setCommandBars([
  {
    cmbId: 'Component ID',
    attributes: { visible: false, enable: false },
  },
])

Execute component commands

You can call the executeCommandBar method to execute component commands. See the following sample code:

const instance = aliyun.config({
  // ...
})

// Wait until the component is ready before the command is executed. 
await instance.ready()

// Automatically click the bookmark button in the top toolbar to open the bookmarks panel.
instance.executeCommandBar('BookMark')

Collaborator configuration

Configure cooperUserAttribute to show or hide the profile pictures and cursor colors of collaborators.

• Example

  const instance = aliyun.config({
    cooperUserAttribute: {
      isCooperUsersAvatarVisible: true, // Display the profile picture of the collaborator. 
      cooperUsersColor: [{
        userId: 'testuid', // The user ID. 
        color: '#F65B90' // The cursor color. 
      }],
    },
  });

• Parameters

  Parameter	Type	Description
  isCooperUsersAvatarVisible	boolean	Specifies whether to display the profile picture of the collaborator. Valid values: true: displays the profile picture. false: does not display the profile picture.
  cooperUsersColor	array	The cursor color of the collaborator. The value is a JSON array. See the following sample code: userId: the user ID specified by a value of the string type. color: the cursor color specified by a value of the string type.

Dynamically set the cursor color of the collaborator

Besides the configurations that take effect only during initialization, JS-SDK also provides an API operation to dynamically set the cursor color of the collaborator. See the following sample code:

await instance.ready()
instance.setCooperUserColor([
  { userId: 'testuid1', color: '#333333' },
  { userId: 'testuid2', color: '#666666' },
])

Listen to the clipboard events

Configure the getClipboardData parameter to allow a mobile application to obtain data from the system clipboard.

When you paste content into a document, you can pass in the getClipboardData function to obtain the system clipboard data, and return an object or a promise object. See the following sample code:

aliyun.config({
  // Obtain the system clipboard data function. 
  getClipboardData: () => {
    // Process data. 

    return Promise.resolve({
      text: 'test-text', // Data in TEXT format. 
      html: test-html, // Data in HTML format. Only table documents support this format. 
      updateExternal: true, // Specify whether the data is copied from an internal clipboard. true indicates data copied from an external clipboard. false indicates data copied from an internal clipboard. 
    })
  },
})

Listen to toast message events

Configure the onToast parameter to disable a toast message and obtain the custom style of the toast message. See the following sample code:

// Configure the toast message interception function. 
aliyun.config({
  onToast: ({ msg, action }) => {
    // Process data. 
    console.log('msg: ', msg) // The message. 
    console.log('action: ', action) // The action. 
  },
})

The following table describes the action parameter.

Listen to redirection to external links

Configure the onHyperLinkOpen parameter to intercept the redirection to external links and obtain the link information for processing. See the following sample code:

// Configure the interception function for redirection to external links. 
aliyun.config({
  onHyperLinkOpen: ({ linkUrl }) => {
    // Process data. 
    console.log('linkUrl: ', linkUrl) // The external link. 
  },
})

Common component configurations

Configure the commonOptions parameter to enable or disable specific features and control the status of opened documents.

• Parameters

  Parameter	Description
  isShowTopArea	Specifies whether to display the top area. Valid values: true: displays the top area. false: does not display the top area including the header and toolbar.
  isShowHeader	Specifies whether to display the header. Valid values: true: displays the header. false: does not display the header.
  isBrowserViewFullscreen	Specifies whether to allow full screen only in the browser area. Valid values: true: allows full screen only in the browser area but does not allow standard full screen. false: allows standard full screen.
  isIframeViewFullscreen	Specifies whether to allow full screen only in the iframe area. Valid values: true: allows full screen only in the iframe area but does not allow standard full screen. false: allows standard full screen.
  acceptVisualViewportResizeEvent	Specifies whether to allow WebOffice to accept external VisualViewport resize events.

• Example

  aliyun.config({
    // Common configurations that are applicable to all types of documents. 
    commonOptions: {
      isShowTopArea: false, // Hide the top area including the header and toolbar. 
      isShowHeader: false, // Hide the header area. 
      isBrowserViewFullscreen: false, // Allow full screen only in the browser area. 
      isIframeViewFullscreen: false, // Allow full screen only in the iframe area. 
      acceptVisualViewportResizeEvent: true, // Allow WebOffice to accept external VisualViewport resize events. 
    },
  })

Configurations for text documents

Configure the wordOptions parameter to customize text documents.

• Parameters

  Parameter	Description
  isShowDocMap	Specifies whether to enable table of contents. The feature is enabled by default.
  isBestScale	Specifies whether to display a document at optimal scale when it is opened.
  isShowBottomStatusBar	Specifies whether to display the status bar at the bottom.
  isOpenIntoEdit	Specifies whether to enter the editing mode when a document is opened on a mobile device. Note Edit permissions are required to use this feature.
  isShowHoverToolbars	Specifies whether to display the toolbar at the bottom on a mobile device.
  isVoiceCommentEnabled	Specifies whether to enable voice comments on a mobile device.
  showFontDownloadNotice	Specifies whether to display the font download prompt on a mobile device.

• Example

  aliyun.config({
    wordOptions: {
      isShowDocMap: false, // Disable table of content. The feature is enabled by default. 
      isBestScale: false, // Do not display a document at optimal scale when it is opened. The document is displayed at optimal scale by default. 
      isShowBottomStatusBar: false, // Do not display the status bar at the bottom. 
      mobile: {
        isOpenIntoEdit: false, // Do not enter the editing mode when a document is opened on a mobile device. 
        isShowHoverToolbars: false, // Do not display the toolbar at the bottom on a mobile device. 
        isVoiceCommentEnabled: false, // Disable the voice comments on a mobile device. 
        showFontDownloadNotice: false, // Do not display the font download prompt on a mobile device. 
      },
    },
  })

Configurations for table documents

No available configurations.

Configurations for presentation documents

Configure the pptOptions parameter to customize presentation documents.

• Parameters

  Parameter	Description
  isShowBottomStatusBar	Specifies whether to display the status bar at the bottom.
  isShowRemarkView	Specifies whether to display the remark view.
  isShowInsertMedia	Specifies whether to display the audio and video files entry field.
  isOpenIntoEdit	Specifies whether to enter the editing mode when a document is opened on a mobile device. Note Edit permissions are required to use this feature.
  showPrevTipWhilePlay	Specifies whether to display the Previous Page prompt when the playback on a mobile device goes to the previous page.
  isShowReviewLogo	Specifies whether to display the review logo in the upper-left corner on a mobile device.
  isShowComment	Specifies whether to display comments.

• Example

  aliyun.config({
    pptOptions: {
      isShowBottomStatusBar: false, // Do not display the status bar at the bottom. 
      isShowRemarkView: true, // Display the remark view. 
      isShowInsertMedia: true, // Display the audio and video files entry field. 
      isShowComment: true, // Display comments. 
      mobile: {
        isOpenIntoEdit: false, // Do not enter the editing mode when a document is opened on a mobile device. 
        showPrevTipWhilePlay: true, // Display the Previous Page prompt when the playback on a mobile device goes to the previous page. 
        isShowReviewLogo: false, // Do not display the review logo in the upper-left corner on a mobile device. 
      },
    },
  })

Configurations for PDF documents

Configure the pdfOptions parameter to customize PDF documents.

• Parameters

  Parameter	Description
  isShowComment	Specifies whether to display comments. Comments are displayed by default.
  isInSafeMode	Whether a document is in the safe mode. In the safe mode, text cannot be selected or copied and links cannot be opened. A document is not in the safe mode by default.
  isBestScale	Whether to display a document at optimal scale when it is opened.
  isShowBottomStatusBar	Specifies whether to display the status bar at the bottom.
  disBackScrollPos	Whether to disable scroll restoration.

• Example

  aliyun.config({
    pdfOptions: {
      isShowComment: false, // Do not display comments. Comments are displayed by default. 
      isInSafeMode: false, // Specify that a document is not in the safe mode. 
      isBestScale: false, // Do not display a document at optimal scale when it is opened. 
      isShowBottomStatusBar: false, // Do not display the status bar at the bottom. 
      disBackScrollPos: true, // Disable scroll restoration. 
    },
  })