Co-editing

    1. User 1 and user 2 open one and the same document in document editor, i.e. when opening the file one and the same document.key has been used.
    2. User 1 makes changes to the opened document.
    3. The document editor sends changes made by user 1 to the document editing service.
    4. The document editing service sends the changes made by user 1 to the user 2 document editor.
    5. Now these changes become visible to user 2.

    Co-editing

    1. Create an empty html file.

    2. Add the div element as shown below.

    3. Specify your ONLYOFFICE Document Server link with the JavaScript API that will be used for your website.

      Where documentserver is the name of the server with the ONLYOFFICE Document Server installed.

    4. Add the script initializing the Document Editor for the div element with the configuration for the document you want to open.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      3.         "fileType": "docx",
      4.         "key": "Khirz6zTPdfd7",
      5.         "title": "Example Document Title.docx",
      6.         "url": "https://example.com/url-to-example-document.docx"
      7.     },
      8.     "documentType": "word",
      9.     "editorConfig": {
      10.         "user": {
      11.             "id": "78e1e841",
      12.             "name": "John Smith"
      13.         }
      14.     }
      15. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    5. Open your html file in the browser.
    6. Now make a copy of your html file created above.

    7. Change the script initializing the Document Editor in the copied html file.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      3.         "fileType": "docx",
      4.         "key": "Khirz6zTPdfd7",
      5.         "title": "Example Document Title.docx",
      6.         "url": "https://example.com/url-to-example-document.docx"
      7.     },
      8.     "documentType": "word",
      9.         "user": {
      10.             "id": "F89d8069ba2b",
      11.             "name": "Kate Cage"
      12.         }
      13.     }
      14. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    8. Open your copied and edited html file in the browser.

    In order to open a document for editing, the config initialization requires the parameter which allows the user to reopen the document from the editor cache. The key is a text field with a limited length and a number of symbols. It is generated by the software integrators and defines the unique document identifier used by the service to recognize the document.

    The key characters can be used: 0-9, a-z, A-Z, -._=. The maximal key length is 128 characters.

    Therefore, it is important that users have the same key to open the document for co-editing. The document editing service identifies the key of another user (or another tab/editing session for inline editors) who is trying to open the document, and if that key matches the key of the file, the user is allowed to open it. If the key is different, then a new file, which is not related to other files and file versions, is opened.

    Once the request for saving the file is sent (the status value is equal to 2) and the operation completion is successful (the response value is equal {“error”:0}), this key can’t be used to open the document for editing. The editor is loaded with an . However, it can be used for viewing the document from the cache if it exists.

    Examples

    1. Add the script initializing the Document Editor with key 1. The key is unknown and the URL for opening the file is specified.

      Close the Document Editor.

      Where example.com is the name of the server where document manager and document storage service are installed.

    2. Add the script initializing the Document Editor with the same key 1. The new URL is not used because the key is known and the document is reopened from the editor cache.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      3.         "fileType": "docx",
      5.         "title": "Example Document 2.docx",
      6.         "url": "https://example.com/url-to-example-document2.docx"
      7.     },
      8.     "documentType": "word",
      9.     ...
      10. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    3. Add the script initializing another Document Editor with key 2. The key is unknown and the URL for opening the file is specified. Even if this URL and the URL from the first scenario are the same, there are two independent editing sessions.

      Close the Document Editor.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      3.         "fileType": "docx",
      4.         "key": "Mgetl3dYUppf2",
      5.         "title": "Example Document.docx",
      6.         "url": "https://example.com/url-to-example-document.docx"
      7.     },
      8.     "documentType": "word",
      9.     ...
      10. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    4. Add the script initializing another Document Editor with key 1. The key is known and the document is reopened from the editor cache. As this key and the key from the second scenario are the same, the document are opened in the co-editing mode.

      Get the current document state without closing the document. The forcesave parameter allows you to do it in the customization section of the editor initialization.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      3.         "fileType": "docx",
      4.         "key": "Khirz6zTPdfd7",
      5.         "title": "Example Document.docx",
      6.         "url": "https://example.com/url-to-example-document.docx"
      7.     },
      8.     "documentType": "word",
      9.     "editorConfig": {
      10.         "customization": {
      11.         }
      12.     },
      13.     ...
      14. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    5. Add the script initializing another Document Editor. The key is not changed for the new users of the current editing session after the successful procedure of . Therefore, key 1 must be used to get to the same co-editing session as the users from the second and the fourth scenarios.

      Where example.com is the name of the server where document manager and document storage service are installed.

    6. Add the script initializing the Document Editor for viewing the document created. Key 1 can be used.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      4.         "key": "Khirz6zTPdfd7",
      5.         "title": "Example Document.docx",
      6.         "url": "https://example.com/url-to-example-document.docx"
      7.     },
      8.     "documentType": "word",
      9.     "editorConfig": {
      10.         "mode": "view"
      11.     },
      12.     ...
      13. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    7. Add the script initializing the Document Editor for editing the document created. Key 1 cannot be used as it was changed after saving the file. An error occurs.

      Close the Document Editor.

      1. new DocsAPI.DocEditor("placeholder", {
      2.     "document": {
      3.         "fileType": "docx",
      4.         "key": "Khirz6zTPdfd7",
      5.         "title": "Example Document.docx",
      6.         "url": "https://example.com/url-to-example-document.docx"
      7.     },
      8.     "documentType": "word",
      9.     "editorConfig": {
      10.         "mode": "edit"
      11.     },
      12.     ...
      13. });

      Where example.com is the name of the server where document manager and document storage service are installed.

    There are two modes to collaborate on documents in real time - Fast and Strict.

    You can change the co-editing mode using the editorConfig.coEditing parameter:

    1. var docEditor = new DocsAPI.DocEditor("placeholder", {
    2.     "editorConfig": {
    3.         "coEditing": {
    4.             "mode": "fast",
    5.             "change": true
    6.         },
    7.         ...
    8.     },
    9. });

    The Fast mode is used by default and defines the real-time co-editing. All changes are saved automatically and the possibility to redo the last undone operation is not available. This mode displays the user cursors and tooltips with their names when they are editing the text.

    Strict mode

    In the Strict mode, you need to use the Save button to sync the changes made by you and other users. Until you click this button, the changes made by others are hidden. When a document is being edited by several users simultaneously, the edited text is marked with dashed lines of different colors.

    When the user saves the changes by clicking the Save button, the others will receive a note about updates. To accept them and save your own changes to show them to other users, click the Save updates button in the left upper corner of the top toolbar. The updates will be highlighted.