Strapi

About the ONLYOFFICE and Strapi integration

Strapi is an open-source content manager system used for building APIs. ONLYOFFICE offers an official connector to integrate ONLYOFFICE Docs with Strapi and edit office documents in your Strapi media library. You can get the ONLYOFFICE integration plugin from the npm library or the GitHub page. The connector is distributed under the Apache-2.0 license.

Main features
  • Editing and viewing text documents, spreadsheets, and presentations.
  • Co-editing documents in real-time: two co-editing modes (Fast and Strict), the Track Changes mode, comments, and the built-in chat.
  • JWT support to secure your traffic so that no one can have access to your documents with the exception of the users with proper rights.
Supported formats
  • For viewing and editing: DOCX, XLSX, PPTX
  • For viewing only: DOC, DOCX, DOCM, DOT, DOTX, DOTM, ODT, FODT, OTT, RTF, TXT, HTML, HTM, MHT, XML, PDF, DJVU, FB2, EPUB, XPS, XLS, XLSX, XLSM, XLT, XLTX, XLTM, ODS, FODS, OTS, CSV, PPS, PPSX, PPSM, PPT, PPTX, PPTM, POT, POTX, POTM, ODP, FODP, OTP

Connecting ONLYOFFICE Docs to Strapi

Requirements
  • ONLYOFFICE Document Server v7.1 (server or cloud version) or later

    You need an instance of ONLYOFFICE Docs that is resolvable and connectable both from Strapi and any end clients. It must be able to POST to Strapi directly.

    Please refer to the official documentation page to learn more about installing ONLYOFFICE Docs.
  • Strapi v4.2.0 or later
  • ONLYOFFICE Connector v1.1.0 for Strapi
Installing the ONLYOFFICE integration plugin for Strapi
  1. To allow inserting a frame with the editor and loading api.js, replace the strapi::security line in the strapi/config/middlewares.js file with the following config:
    
    {
      name: "strapi::security",
      config: {
        contentSecurityPolicy: {
          useDefaults: true,
          directives: {
            "script-src": ["'self'", "https:", "http:"],
            "frame-src": ["'self'", "https:", "http:"],
          },
        },
      }
    },  
                        

    If such a config already exists, you just need to add directives.

  2. Install the plugin in your Strapi project:
    npm install onlyoffice-strapi --save
  3. Rebuild and restart Strapi to include ONLYOFFICE plugin into admin UI. Run:
    
    # using yarn
    yarn build
    yarn develop      
    
    # using npm
    npm run build
    npm run develop
    

    Now the ONLYOFFICE integration plugin for Strapi is installed and ready to be configured. The plugin can be accessed via the left panel in the Plugins section under the name ONLYOFFICE.

    ONLYOFFICE installedONLYOFFICE installed
Configuring the ONLYOFFICE integration plugin for Strapi

To configure the ONLYOFFICE integration plugin in Strapi:

  1. Open the Settings section in the left panel.
  2. In the Global settings section, click the ONLYOFFICE menu item.
  3. On the ONLYOFFICE settings page, enter the Document server address, i.e. the URL of the installed ONLYOFFICE Docs.
    The address of ONLYOFFICE Docs must be accessible from Strapi, as well as the address of Strapi must be accessible from ONLYOFFICE Docs.
How it works

The user-document interaction is done both at the client side and at the server side.

The main notions used throughout the current documentation are explained below.

The client side includes:

  • Document manager - the list of the documents displayed in the user browser where the user can select the necessary document and perform some actions with it (depending on the provided rights, the user can open the document to view it or edit, share the document with other users).
  • Document editor - the document viewing and editing interface with all the most known document editing features available, used as a medium between the user and the document editing service.

The server side includes:

  • Document storage service - the server service which stores all the documents available to the users with the appropriate access rights. It provides the document IDs and links to these documents to the document manager which the user sees in the browser.
  • Document editing service - the server service which allows performing the document viewing and editing (in case the user has the appropriate rights to do that). The document editor interface is used to access all the document editing service features.
  • Document command service - the server service which allows performing additional commands with document editing service.
  • Document conversion service - the server service which allows converting the document file into the appropriate Office Open XML format (docx for text documents, xlsx for spreadsheets and pptx for presentations) for their editing or downloading.
  • Document builder service - the server service which allows building a document easily without the need to actually run a document processing editor.

Please note, that ONLYOFFICE Document Server includes the document editor, document editing service, document command service, document conversion service and document builder service. The document manager and document storage service are either included to Community Server or must be implemented by the software integrators which use ONLYOFFICE Document Server on their own server.

Enabling JWT for the ONLYOFFICE and Strapi integration

JWT or JSON Web Token is a string sent from client to server within the HTTP request to validate the authenticity of the client. JWT is saved on the client-side only, so the transmission between parties is protected and digitally signed.

The token is generated using the JWT (JSON Web Tokens) standard. The tokens are signed by the server's key, so the client is able to verify that the token is legitimate.

ONLYOFFICE Docs validates the token. The data from the payload is considered valid and is used instead of the corresponding data from the main parameters. If the token is invalid, the command is not executed. To learn more, please read the API Security guide.

To protect your documents with JWT,

  1. Open the Settings section in the left panel.
  2. In the Global settings section, click the ONLYOFFICE menu item.
  3. On the ONLYOFFICE settings page, enter the secret key in the Document server JWT secret key field. Further information can be found here.
    ONLYOFFICE pluginONLYOFFICE plugin

    Now that the ONLYOFFICE integration plugin is configured, you can start using it.

Start using ONLYOFFICE Docs within Strapi

To let users edit the office documents from Strapi in the ONLYOFFICE Docs editors and save the changes back to Strapi, upload the files and set corresponding access rights.

Uploading files to Strapi
  1. In the Plugins section in the left panel, open the Media Library page.
  2. Click the Add new assets button in the top right corner.
    Media LibraryMedia Library
  3. The Add new assets window opens. Choose whether you want to upload a file from your computer or from URL clicking the corresponding tab in the top panel.
    Add new assetsAdd new assets
Viewing, editing and managing files in Strapi

To view, edit, and co-author documents added to the Strapi Media Library,

  1. In the Plugins section in the left panel, open the ONLYOFFICE file page within Strapi.
  2. To open the file in the ONLYOFFICE editor, click the file name or click the Edit in ONLYOFFICE button to the right.
    View and edit in ONLYOFFICEView and edit in ONLYOFFICE

To save files in the required format right in the editor,

  1. Go to the File tab.
  2. Click the Download as... option and choose the required format.

To mark files as favorite right in the editor, click the Mark as favorite Mark as favorite icon in the top toolbar.

To return to the file list,

  1. Go to the File tab.
  2. Click the Open file location option in the menu to the right.
Access rights

To manage access rights to files added to the Strapi Media Library:

  1. Go to the Settings tab located in the General section on the left panel.
  2. In the Administration panel section, go to the Roles tab.
  3. Edit the role by clicking the Edit icon to the right of the role name.

To allow users to edit files, set the Update + Delete access rights for the required user role.

To allow users to view files only, set the Access the Media Library access right for the required user role.

Host ONLYOFFICE Docs on your own server or use it in the cloud

Article with the tag:
Browse all tags