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
Name Description Type Example
Defines 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. Please note that in case you change this option in menu it will be saved to your browser localStorage. The default value is true. boolean true
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.
Defines 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. boolean true
Defines if the user can edit and delete only his comments. The default value is false. boolean true
Defines 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, the adding and editing of comments will be unavailable. The default value is true. boolean true
Defines 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. boolean false
Defines if the top toolbar type displayed is full (false) or compact true. The default value is false. boolean false
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.
Contains the information which will be displayed int 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 were in .png format with transparent background). The image must have the following size: 432x70,
    type: string,
    example: "https://example.com/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.";
  • www - home website address of the above company or person,
    type: string,
    example: "example.com".
object
Defines 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 - show or hide the Feedback & Support menu button,
    type: boolean,
    example: true.
The default value is false.
boolean or object true
Adds the request for the forced file 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. boolean false
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.
Defines settings for the Open file location menu button and upper right corner button. The object has the following parameters:
  • blank - open 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 object true
Defines if the Help menu button is displayed or hidden. The default value is true. boolean true
Defines if the right menu is displayed or hidden on first loading. The default value is false. boolean false
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.
Changes 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 common work mode (i.e. in view and edit modes for all editors). The image must have the following size: 172x40,
    type: string,
    example: "https://example.com/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,
    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
Defines 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. boolean true
Please note that it will only be available for the comments if the onRequestSendNotify event is set.
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 the mode parameter is set to view. Can take the following values:
  • final - the document is displayed with all the proposed changes applied;
  • markup - the document is displayed with proposed changes highlighted;
  • original - the original document is displayed without the proposed changes.
The default value is original.
string original
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.
Defines if the review changes panel is automatically displayed or hidden when the editor is loaded. The default value is false. boolean false
Defines 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. boolean true
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.
Defines if the top toolbar tabs are distinctly displayed (when set to false) or only highlighted to see which one is selected (when set to true). The default value is false. boolean false
Defines 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).
string cm
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.
Defines 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. integer 100
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.
* - available for editing only for ONLYOFFICE Developer Edition
Example
var docEditor = new DocsAPI.DocEditor("placeholder", {
    "editorConfig": {
        "customization": {
            "chat": true,
            "commentAuthorOnly": false,
            "comments": true,
            "compactHeader": false,
            "compactToolbar": false,
            "customer": {
                "address": "My City, 123a-45",
                "info": "Some additional information",
                "logo": "https://example.com/logo-big.png",
                "mail": "john@example.com",
                "name": "John Smith and Co.",
                "www": "example.com"
            },
            "feedback": {
                "url": "https://example.com",
                "visible": true
            },
            "forcesave": false,
            "goback": {
                "blank": true,
                "requestClose": false,
                "text": "Open file location",
                "url": "https://example.com"
            },
            "help": true,
            "hideRightMenu": false,
            "logo": {
                "image": "https://example.com/logo.png",
                "imageEmbedded": "https://example.com/logo_em.png",
                "url": "https://www.onlyoffice.com"
            },
            "mentionShare": true,
            "reviewDisplay": "original",
            "showReviewChanges": false,
            "spellcheck": true,
            "toolbarNoTabs": false,
            "unit": "cm",
            "zoom": 100
        },
        ...
    },
    ...
});

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.