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: 200
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.

React_dev
Posts: 1
Joined: Tue Oct 22, 2019 3:11 pm

Re: Integration with ReactJS

Post by React_dev » Tue Oct 22, 2019 3:14 pm

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?

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

Re: Integration with ReactJS

Post by Carl » Thu Oct 24, 2019 3:15 pm

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.

Post Reply