Open file in ONLYOFFICE editors
Opens a file in ONLYOFFICE editors using the file selector.
Before you start
Please make sure you are using a server environment to run the HTML file because the JavaScript SDK must be launched on the server. You need to add the URL of your server's root directory to the Developer Tools section of DocSpace.
Step 1. Set HTML structure
Create an HTML file. It must include a div tag where we specify the DocSpace connection parameters:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocSpace JavaScript SDK</title>
<script src="{PORTAL_SRC}/static/scripts/sdk/1.0.0/api.js"></script>
...
</head>
<body>
<div id="ds-frame"></div>
...
</body>
</html>
The API JavaScript file can normally be found in the following DocSpace folder: {PORTAL_SRC}/static/scripts/sdk/1.0.0/api.js where {PORTAL_SRC} is the name of the server with the ONLYOFFICE DocSpace installed.
Step 2. Add the file selector
Add a script to initialize the file selector.
- Add an event handler for onAppReady, which fires when initialization is successful:
function onAppReady() {
const frame = DocSpace.SDK.frames["ds-frame"]
}
- Add an event handler for onSelectCallback. When the user selects a file, ONLYOFFICE editors are initialized by passing the ID of the file selected in the file selector to the initEditor method:
function onSelectCallback() {
docSpace = DocSpace.SDK.initEditor({
id: e.id,
height: "700px",
})
}
- Create a configuration for the file selector:
const config = {
events: {
onSelectCallback,
onAppReady,
},
height: "700px",
width: "100%",
}
- Initialize the file selector with the initFileSelector method:
const docSpace = DocSpace.SDK.initFileSelector(config)
Step 3. Run the sample
Run our HTML file and make sure everything works.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DocSpace JavaScript SDK</title>
<script src="{PORTAL_SRC}/static/scripts/sdk/1.0.0/api.js"></script>
...
</head>
<body>
<div id="ds-frame"></div>
...
</body>
<script>
function onSelectCallback() {
docSpace = DocSpace.SDK.initEditor({
id: e.id,
height: "700px",
})
}
function onAppReady() {
const frame = DocSpace.SDK.frames["ds-frame"]
}
const config = {
events: {
onSelectCallback,
onAppReady,
},
height: "700px",
width: "100%",
}
const docSpace = DocSpace.SDK.initFileSelector(config)
</script>
</html>