Customization

Description

The customization section allows to customize the editor interface so that it looked like your other products (if there are any) and change the presence or absence of the additional buttons, links, change logos and editor owner details.

Parameters

NameDescriptionTypeExample
anonymousAdds a request for the anonymous name:
  • request - defines if the request is sent or not. The default value is true,
    type: boolean,
    example: true;
  • label - a postfix added to the user name. The default value is Guest,
    type: string,
    example: “Guest”;
object
Customization - 图1
autosaveDefines if the Autosave menu option is enabled or disabled. If set to false, only Strict co-editing mode can be selected, as Fast does not work without autosave. The default value is true.booleantrue
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.autosave parameter.
chatDefines if the Chat menu button is displayed or hidden. Please note that in case you hide the Chat button, the corresponding chat functionality will also be disabled. The default value is true. Deprecated since version 7.1, please use the document.permissions.chat parameter instead.booleantrue
commentAuthorOnlyDefines if the user can edit and delete only his comments. The default value is false. Deprecated since version 6.3, please use the document.permissions.editCommentAuthorOnly and document.permissions.deleteCommentAuthorOnly fields instead.booleantrue
commentsDefines if the Comments menu button is displayed or hidden. Please note that in case you hide the Comments button, the corresponding commenting functionality will be available for viewing only, adding and editing comments will be unavailable. The default value is true.booleantrue
compactHeaderDefines if the additional action buttons are displayed in the upper part of the editor window header next to the logo (false) or in the toolbar (true) making the header more compact. The default value is false.booleanfalse
Customization - 图2
compactToolbarDefines if the top toolbar type displayed is full (false) or compact (true). The default value is false.booleanfalse
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.compactToolbar parameter.
Customization - 图3
compatibleFeaturesDefines the use of functionality only compatible with the OOXML format. For example, do not use comments on the entire document. The default value is false.booleanfalse
customerContains the information which will be displayed in the editor About section and visible to all the editor users. The object has the following parameters:
  • address - postal address of the company or person who gives access to the editors or the editor authors,
    type: string,
    example: “My City, 123a-45”;
  • info - some additional information about the company or person you want the others to know,
    type: string,
    example: “Some additional information”;
  • logo - the path to the image logo (there are no special recommendations for this file, but it would be better if it was in the .png format with transparent background). The image must have the following size: 432x70,
    type: string,
    example: “https://example.com/logo-big.png“.
  • logoDark - the path to the image logo for the dark theme (there are no special recommendations for this file, but it would be better if it was in .png format with transparent background). The image must have the following size: 432x70,
    type: string,
    example: “https://example.com/dark-logo-big.png“.
  • mail - email address of the company or person who gives access to the editors or the editor authors,
    type: string,
    example: “john@example.com”.
  • name - the name of the company or person who gives access to the editors or the editor authors,
    type: string,
    example: “John Smith and Co.”;
  • phone - the phone of the company or person who gives access to the editors or the editor authors,
    type: string,
    example: “123456789”;
  • www - home website address of the above company or person,
    type: string,
    example: “example.com”.
object
featuresDefines the parameters that the user can disable or customize if possible:
  • spellcheck - defines if the spell checker is automatically switched on or off when the editor is loaded. If this parameter is a boolean value, then it is set as the initial spell checker value and the spell checker setting will not be hidden. The default value is true,
    type: object or boolean,
    example: true;
  • spellcheck.mode - defines if the spell checker is automatically switched on or off when the editor is loaded. This parameter will only be available for the document editor and the presentation editor,
    type: boolean,
    example: true;
object
Please note that in case spellcheck setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.features.spellcheck parameter.
feedbackDefines settings for the Feedback & Support menu button. Can be either boolean (simply displays or hides the Feedback & Support menu button) or object. In case of object type the following parameters are available:
  • url - the absolute URL to the website address which will be opened when clicking the Feedback & Support menu button,
    type: string,
    example: “https://example.com“;
  • visible - shows or hides the Feedback & Support menu button,
    type: boolean,
    example: true.
The default value is false.
boolean or objecttrue
forcesaveAdds the request for the file force saving to the callback handler when saving the document within the document editing service (e.g. clicking the Save button, etc.). The default value is false.booleanfalse
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.forcesave parameter.
gobackDefines settings for the Open file location menu button and upper right corner button. The object has the following parameters:
  • blank - opens the website in the new browser tab/window (if the value is set to true) or the current tab (if the value is set to false) when the Open file location button is clicked. The default value is true,
    type: boolean,
    example: true;
  • requestClose - defines that if the Open file location button is clicked, events.onRequestClose event is called instead of opening a browser tab or window. The default value is false,
    type: boolean,
    example: false;
  • text - the text which will be displayed for the Open file location menu button and upper right corner button (i.e. instead of Go to Documents),
    type: string,
    example: “Open file location”;
  • url - the absolute URL to the website address which will be opened when clicking the Open file location menu button,
    type: string,
    example: “https://example.com“.
boolean or objecttrue
Customization - 图4
helpDefines if the Help menu button is displayed or hidden. The default value is true.booleantrue
Customization - 图5
hideNotesDefines if the note panel is displayed or hidden on first loading. The default value is false. This parameter is available for the presentation editor only.booleanfalse
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.hideNotes parameter.
Customization - 图6
hideRightMenuDefines if the right menu is displayed or hidden on first loading. The default value is false.booleanfalse
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.hideRightMenu parameter.
hideRulersDefines if the editor rulers are displayed or hidden. This parameter is available for the document and presentation editors. The default value is false for the document editor and true for presentations.booleanfalse
Customization - 图7
integrationModeDefines the mode of embedding editors into the web page. The embed value disables scrolling to the editor frame when it is loaded as the focus is not captured.stringembed
logoChanges the image file at the top left corner of the editor header. The recommended image height is 20 pixels. The object has the following parameters:
  • image - path to the image file used to show in the common work mode (i.e. in view and edit modes for all editors) or in the embedded mode (see the config section to find out how to define the embedded document type). The image must have the following size: 172x40,
    type: string,
    example: “https://example.com/logo.png“;
  • imageDark - path to the image file used for the dark theme. The image must have the following size: 172x40,
    type: string,
    example: “https://example.com/dark-logo.png“;
  • imageEmbedded - path to the image file used to show in the embedded mode (see the config section to find out how to define the embedded document type). The image must have the following size: 248x40. Deprecated since version 7.0, please use the image field instead,
    type: string,
    example: “https://example.com/logo_em.png“;
  • url - the absolute URL which will be used when someone clicks the logo image (can be used to go to your web site, etc.). Leave as an empty string or null to make the logo not clickable,
    type: string,
    example: “https://example.com“.
object
macrosDefines if document macros will be automatically run when the editor opens. The default value is true. The false value hides the macros settings from the user.booleantrue
macrosModeDefines the macros run mode when autostart is enabled. Can take the following values:
  • disable - don’t run macros at all;
  • enable - run all macros automatically;
  • warn - warn about macros and ask permission to run them.
The default value is warn.
stringwarn
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.macrosMode parameter.
mentionShareDefines the hint that describes the event after mentions in a comment. If true, a hint indicates that the user will receive a notification and access to the document. If false, a hint indicates that the user will receive only a notification of the mention. The default value is true.booleantrue
Please note that it will only be available for the comments if the onRequestSendNotify event is set.
Customization - 图8
pluginsDefines if plugins will be launched and available. The default value is true.booleantrue
reviewContains the information about the review mode. The object has the following parameters:
  • hideReviewDisplay - defines if the Display mode button is displayed or hidden on the Collaboration tab. The default value is false,
    type: boolean,
    example: false;
  • hoverMode - defines the review display mode: show reviews in tooltips by hovering the changes (true) or in balloons by clicking the changes (false). The default value is false.
    type: boolean,
    example: false;
  • reviewDisplay - defines the review editing mode which will be used when the document is opened for viewing. It will only be available for the document editor if mode is set to view. Can take the following values:
    markup - the document is displayed with proposed changes highlighted;
    simple - the document is displayed with proposed changes highlighted, but the balloons are turned off;
    final - the document is displayed with all the proposed changes applied;
    original - the original document is displayed without the proposed changes.
    The default value is original,
    type: string,
    example: “original”;
  • showReviewChanges - defines if the review changes panel is automatically displayed or hidden when the editor is loaded. The default value is false,
    type: boolean,
    example: false;
  • trackChanges - defines if the document is opened in the review editing mode (true) or not (false) regardless of the document.permissions.review parameter (the review mode is changed only for the current user). If the parameter is undefined, the document.permissions.review value is used (for all the document users),
    type: boolean,
    example: true.
object
The showReviewChanges, reviewDisplay, trackChanges parameters are deprecated since version 7.0. Please use the review parameter instead.
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.review.hoverMode and the editorConfig.customization.review.reviewDisplay parameters.
Customization - 图9
reviewDisplayDefines the review editing mode in the document editor. This parameter can take the following values:
  • markup - the document is displayed with proposed changes highlighted;
  • simple - the document is displayed with proposed changes highlighted, but the balloons are turned off;
  • final - the document is displayed with all the proposed changes applied;
  • original - the original document is displayed without the proposed changes.
The default value is original for viewer and markup for editor.
stringoriginal
Deprecated since version 7.0. Please use the review.reviewDisplay parameter instead.
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.reviewDisplay parameter.
showReviewChangesDefines if the review changes panel is automatically displayed or hidden when the editor is loaded. The default value is false.booleanfalse
Deprecated since version 7.0. Please use the review.showReviewChanges parameter instead.
spellcheckDefines if the spell checker is automatically switched on or off when the editor is loaded. Spell checker will only be available for the document editor and the presentation editor. The default value is true.booleantrue
Deprecated since version 7.1. Please use the features.spellcheck parameter instead.
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.spellcheck parameter.
toolbarHideFileNameDefines if the document title is visible on the top toolbar (false) or hidden (true). The default value is false.booleanfalse
Please note that this setting is used when the compactHeader and toolbarNoTabs parameters are set to true.
Customization - 图10
toolbarNoTabsDefines if the top toolbar tabs are distinctly displayed (false) or only highlighted to see which one is selected (true). The default value is false.booleanfalse
Customization - 图11
trackChangesDefines if the document is opened in the review editing mode (true) or not (false) regardless of the document.permissions.review parameter (the review mode is changed only for the current user). If the parameter is undefined, the document.permissions.review value is used (for all the document users).booleantrue
Deprecated since version 7.0. Please use the review.trackChanges parameter instead.
uiThemeDefines the editor theme settings. It can be set in two ways:
  • theme id - the user sets the theme parameter by its id (theme-light, theme-classic-light, theme-dark, theme-contrast-dark),
  • default theme - the default dark or light theme value will be set (default-dark, default-light). The default light theme is theme-classic-light.
The first option has higher priority.

Apart from the available editor themes, the user can also customize their own color themes for the application interface.
stringtheme-dark
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.uiTheme parameter.
unitDefines the measurement units used on the ruler and in dialog boxes. Can take the following values:
  • cm - centimeters,
  • pt - points,
  • inch - inches.
The default value is centimeters (cm).
stringcm
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.unit parameter.
zoomDefines the document display zoom value measured in percent. Can take values larger than 0. For text documents and presentations it is possible to set this parameter to -1 (fitting the document to page option) or to -2 (fitting the document page width to the editor page). The default value is 100.integer100
Please note that in case this setting is changed in the editor interface, it will be stored in the browser local storage and will overwrite any values sent as the editorConfig.customization.zoom parameter.
Customization - 图12

* - available for editing only for ONLYOFFICE Developer Edition

Example

  1. var docEditor = new DocsAPI.DocEditor("placeholder", {
  2. "editorConfig": {
  3. "customization": {
  4. "anonymous": {
  5. "request": true,
  6. "label": "Guest"
  7. },
  8. "comments": true,
  9. "compactHeader": false,
  10. "compactToolbar": false,
  11. "compatibleFeatures": false,
  12. "customer": {
  13. "address": "My City, 123a-45",
  14. "info": "Some additional information",
  15. "logo": "https://example.com/logo-big.png",
  16. "logoDark": "https://example.com/dark-logo-big.png",
  17. "mail": "john@example.com",
  18. "name": "John Smith and Co.",
  19. "phone": "123456789",
  20. "www": "example.com"
  21. },
  22. "features": {
  23. "spellcheck": {
  24. "mode": true,
  25. }
  26. },
  27. "feedback": {
  28. "url": "https://example.com",
  29. "visible": true
  30. },
  31. "forcesave": false,
  32. "goback": {
  33. "blank": true,
  34. "requestClose": false,
  35. "text": "Open file location",
  36. "url": "https://example.com"
  37. },
  38. "help": true,
  39. "hideNotes": false,
  40. "hideRightMenu": false,
  41. "hideRulers": false,
  42. "integrationMode": "embed",
  43. "logo": {
  44. "image": "https://example.com/logo.png",
  45. "imageDark": "https://example.com/dark-logo.png",
  46. "url": "https://www.onlyoffice.com"
  47. },
  48. "macros": true,
  49. "macrosMode": "warn",
  50. "mentionShare": true,
  51. "plugins": true,
  52. "review": {
  53. "hideReviewDisplay": false,
  54. "showReviewChanges": false,
  55. "reviewDisplay": "original",
  56. "trackChanges": true,
  57. "hoverMode": false
  58. },
  59. "toolbarHideFileName": false,
  60. "toolbarNoTabs": false,
  61. "uiTheme": "theme-dark",
  62. "unit": "cm",
  63. "zoom": 100
  64. },
  65. ...
  66. },
  67. ...
  68. });

Where the example.com is the name of the server where document manager and document storage service are installed. See the How it works section to find out more on Document Server service client-server interactions.

If you have any further questions, please contact us at integration@onlyoffice.com.