Page 1 of 1

Integration with ReactJS

Posted: Mon Mar 26, 2018 2:21 pm
by Abhishek_Nalin
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

Re: Integration with ReactJS

Posted: Tue Apr 03, 2018 10:25 am
by Maxim
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?

Re: Integration with ReactJS

Posted: Thu Jun 28, 2018 12:29 pm
by BorisZR
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

Re: Integration with ReactJS

Posted: Tue Sep 03, 2019 2:01 pm
by Srini
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"
}});

Re: Integration with ReactJS

Posted: Thu Sep 12, 2019 7:24 am
by Carl
Hi Srini,

Your request has been replied to in our helpdesk.

Re: Integration with ReactJS

Posted: Tue Oct 22, 2019 3:14 pm
by React_dev
Carl wrote:
Thu Sep 12, 2019 7:24 am
Hi Srini,

Your request has been replied to in our helpdesk.
Where though?
Could you supply a link to the reply?

Re: Integration with ReactJS

Posted: Thu Oct 24, 2019 3:15 pm
by Carl
Hello React_dev,

We don't post links to our Helpdesk threads here. These threads are private anyway, only our team and users who submit the tickets have access to them. If you have any questions, please post them here.