Integration with ReactJS

Integration questions/issues
Post Reply
Abhishek_Nalin
Posts: 1
Joined: Mon Mar 26, 2018 1:32 pm

Integration with ReactJS

Post by Abhishek_Nalin » Mon Mar 26, 2018 2:21 pm

Hi,
I went through the integration example of NodeJS which was done using EJS. I was looking for a ReactJS example.

I have installed document server on IP - AA.BB.YY.XX and it is working fine.
We have a ReactJS frontend. I added the script tag in our index.html
<script type="text/javascript" src="http://AA.BB.YY.XX/web-apps/apps/api/do ... "></script>

When the user clicks on the word document in my app I call a function named openEditor and pass the url

openEditor = (url) => {
new DocsAPI.DocEditor("placeholder", {
"document": {
"fileType": "docx",
"key": "Khirz6zTPdfd7",
"title": "Example Document Title.docx",
"url": url
},
"documentType": "text"
});
}

However this doesn't work because I get the compilation error 'DocsAPI' is not defined'
Is there a way to make this work? How do I define DocsAPI in my ReactComponent?
Is this the right way to integrate with React?

Regards
Abhishek

Maxim
Posts: 2017
Joined: Tue Oct 11, 2016 2:34 pm

Re: Integration with ReactJS

Post by Maxim » Tue Apr 03, 2018 10:25 am

Hello!
'DocsAPI' is not defined means that there is no access to API
what do you get if you go to http://AA.BB.YY.XX/web-apps/apps/api/documents/api.js?

BorisZR
Posts: 1
Joined: Thu Jun 28, 2018 12:25 pm

Re: Integration with ReactJS

Post by BorisZR » Thu Jun 28, 2018 12:29 pm

Hello,

You have to use window explicity to access the DocsAPI object.
Code snippet:

Code: Select all

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
        <div id="placeholder"></div>
    );
  }

  componentDidMount() {
    let config = {
      "document": {
        "fileType": "docx",
        "key": "...",
        "title": "...",
        "url": "..."
      },
      "documentType": "text",
      "editorConfig": {
        "callbackUrl": "..."
      }
    };
    new window.DocsAPI.DocEditor("placeholder", config);
  }
}

export default App;
Best regards,
Boris

Srini
Posts: 1
Joined: Mon Sep 02, 2019 11:55 am

Re: Integration with ReactJS

Post by Srini » Tue Sep 03, 2019 2:01 pm

Hi team,
I have installed DocumentServer and its dependencies by following below link steps
https://helpcenter.onlyoffice.com/serve ... -apps.aspx

I believe it will be installed in the default port 8080

When i use below in my React js application, it not working properly(says DocsAPI undefined). Can you please help me to sort this out?

<script type="text/javascript" src="http://localhost:8080/web-apps/apps/api ... "></script>
this.myWebViewer = new window.DocsAPI.DocEditor("placeholder", {"document": {
"fileType": "docx",
"key": "Khirz6zTPdfd7",
"title": "Example Document Title.docx",
"url": "https://example.com/url-to-example-document.docx"
},
"documentType": "text",
"editorConfig": {
"callbackUrl": "https://example.com/url-to-callback.ashx"
}});

Carl
Posts: 172
Joined: Thu Apr 12, 2018 10:00 am

Re: Integration with ReactJS

Post by Carl » Thu Sep 12, 2019 7:24 am

Hi Srini,

Your request has been replied to in our helpdesk.

Post Reply