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
Integration with ReactJS
Re: Integration with ReactJS
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?
'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
Hello,
You have to use window explicity to access the DocsAPI object.
Code snippet:
Best regards,
Boris
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;
Boris
Re: Integration with ReactJS
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"
}});
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
Hi Srini,
Your request has been replied to in our helpdesk.
Your request has been replied to in our helpdesk.
Re: Integration with ReactJS
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.
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.