Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Integrate ONLYOFFICE Document Editors With Your Web Application

DZone's Guide to

How to Integrate ONLYOFFICE Document Editors With Your Web Application

Look at how to integrate ONLYOFFICE document editors with your web application.

· Integration Zone ·
Free Resource

SnapLogic is the leading self-service enterprise-grade integration platform. Download the 2018 GartnerMagic Quadrant for Enterprise iPaaS or play around on the platform, risk free, for 30 days.

ONLYOFFICE is an open-source office suite that includes document, spreadsheet and presentation editors, which have maximum compatibility with Microsoft Office formats (docx, xlsx, and pptx) and support for other popular formats.

Reasons to Integrate ONLYOFFICE Editors

  1. You can integrate these editors with your web app.
  2. You can host them on your machine and maintain full control over your data.
  3. It doesn’t matter much what your app does. ONLYOFFICE editors have already been integrated with different software: document management and CRM systems, mail services, e-learning platforms, and many more.
  4. Your app can be written in any language. ONLYOFFICE will fit right in anyway!
  5. The integration process is not complicated at all.

Let’s say you have a document management system, and you want to add document viewing and editing.

Install ONLYOFFICE Document Server

ONLYOFFICE Document Server contains the editors. Before you integrate the editors with your application, you should deploy them on your machine. The easiest way to install to do it is to use Docker:

docker run -itd -p 8080:80 onlyoffice/documentserver 

Document Server will be available at 0.0.0.0:8080 .

Grant Access to Your Files

To use the editors within your app, you’ll need access to files you want to open and edit.

To show how to get to them, we will use a simple app on Node.js with express framework. The app will use port 3000.

When the GET request is sent to http://localhost:3000/ , the fileindex.html is returned. The Files folder contains public files that will be available at http://localhost:3000/filename .

const express = require('express');

const path = require('path');

const app = express();

app.use(express.static('files'));

app.get('/', (req, res) => {

res.sendFile(path.join(__dirname + '/index.html'))

});

app.listen(3000 , () => console.log(`Example app listening on port ${port}!`));

How to Open a Doc for Viewing

Open the index.html file and connect Document Server API. You need to add three buttons — for opening text documents, spreadsheets, and presentations.

The editors will be opened in the element with the placeholder ID.

<script type="text/javascript" 
        src="http://0.0.0.0:8080/web-apps/apps/api/documents/api.js"></script>

<button onclick="open_to_view('1.docx', 'text')">1.docx view</button>

<button onclick="open_to_view('1.xlsx', 'spreadsheet')">1.xlsx view</button>

<button onclick="open_to_view('1.pptx', 'presentation')">1.pptx view</button>

<div id="placeholder"></div>

<script>

function open_to_view(filename, documentType) {

// Close the editors if they are open.

if (this.docEditor) {
this.docEditor.destroyEditor()
}

// Add the link to the file you want to open

const url = window.location.protocol + "//" +
 window.location.hostname + ':' + window.location.port + '/' + filename;

// Create DocsAPI object and open the editor

this.docEditor = new DocsAPI.DocEditor("placeholder",

{

documentType: documentType,

document: { url: url },

editorConfig: { mode: "view" }

});

}

</script>

After you do this, clicking one of the buttons will open files for viewing in ONLYOFFICE.

How to Open a File for Editing

Now you need to add three buttons more for editing files. Then, write a new function open_to_edit() . It will look much like the open_to_view() function but without the editorConfig .

<button onclick="open_to_edit('1.docx', 'text')">1.docx view</button>

<button onclick="open_to_edit('1.xlsx', 'spreadsheet')">1.xlsx view</button>

<button onclick="open_to_edit('1.pptx', 'presentation')">1.pptx view</button>

<script>

function open_to_edit(filename, documentType) {

if (this.docEditor) {
this.docEditor.destroyEditor()
}

const url = window.location.protocol + "//" +
window.location.hostname + ':' + window.location.port + '/' + filename;

this.docEditor = new DocsAPI.DocEditor("placeholder", {

documentType: documentType,

document: { url: url }

});

}

</script>

After that, you will be able to open files for editing. But that’s not enough because we also want to save files. Let’s add this, shall we?

How to Save Files

Now we will write the minimum callback handler for saving files to your server.

app.post("/track", function (req, res) {

// status 2 means that the files is ready for saving.
// More information about statuses can be found in our API documentation
if (req.body.status === 2) {

const file = syncRequest("GET", req.body.url);

fs.writeFileSync(__dirname + '/files/' + req.query.fileName, file.getBody());

// {"error": 0} you need to get this response from your storage,
        //it means no errors occurred. Details

res.write("{\"error\":0}");

res.end();

// do not do anything about other responses

} else {

res.write("{\"error\":0}");

res.end();

}
});

This is the minimum that has to be done to integrate ONLYOFFICE editors with your application. Check out ONLYOFFICE API documentation to learn more.

Note that in this article we used an app on Node.js as an example. More integration examples can be found on GitHub.

What About the License?

ONLYOFFICE comes with a dual-license model. This means that as long as you respect the GNU AGPL v.3 license, you can use the ONLYOFFICE open source solution available on GitHub. There are a lot of successful integration examples — with ownCloud, Nextcloud, Moodle, and eХo Platform.

To deliver ONLYOFFICE editors as a part of your SaaS or on-premise service, a commercial license is required. There are many good examples of commercial usage, too. For instance, PowerFolder, a German provider of public, private, and hybrid cloud solutions, used ONLYOFFICE to bring online document editing to their users.

Download A Buyer's Guide to Application and Data Integration, your one-stop-shop for research, checklists, and explanations for an application and data integration solution.

Topics:
open source ,integration ,tutorial ,api ,how-to guides ,document formatting services ,document processing software free

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}