JavaScript API Overview

Introduction

The OnlyOfficeEditorModule is a JavaScript module that provides a client-side API for integrating OnlyOffice Document Server into ASP.NET applications. It acts as a wrapper around the OnlyOffice DocsAPI, providing simplified methods for initialization, document retrieval, and lifecycle management.

Accessing the Module

The module is exposed as a global object and can be accessed directly from JavaScript:

// Access the global OnlyOfficeEditorModule
var editor = OnlyOfficeEditorModule.init('editorContainer', config, options);

The OnlyOfficeEditorModule is implemented as an IIFE (Immediately Invoked Function Expression) and is available globally once the script is loaded.

Module Architecture

The module uses a singleton pattern to manage multiple editor instances:

Instance Management: Maintains internal references to all editor instances by container ID
Event Handling: Wraps OnlyOffice events and provides custom callbacks
Promise-based API: Modern async/await support for document operations
Automatic Cleanup: Manages editor lifecycle and resource disposal

Prerequisites

The OnlyOffice DocsAPI must be loaded before using OnlyOfficeEditorModule. The module checks for the global DocsAPI object and will return an error if it’s not available.

<!-- Load OnlyOffice Document Server API first -->
<script src="https://your-documentserver/web-apps/apps/api/documents/api.js"></script>

<!-- Then load OnlyOfficeEditorModule -->
<script src="/path/to/OnlyOfficeEditor.js"></script>

Core Concepts

Container ID

Each editor instance is associated with a DOM container element identified by its id attribute:

<div id="editorContainer"></div>

OnlyOfficeEditorModule.init('editorContainer', config);

Configuration Object

The configuration object follows the OnlyOffice Document Server API structure with extensions:

document: Document metadata and URL
editorConfig: Editor behavior and customization
events: Event handlers (managed by the module)

Options Object

Custom callbacks provided by OnlyOfficeEditorModule:

onReady: Called when the editor application is ready
onDocumentReady: Called when the document is loaded
onError: Called on errors

Available Methods

The module exposes the following public methods:

Method	Description	Returns
`init()`	Initialize a new editor instance	`DocEditor` object
`getEditedDocumentUrl()`	Get download URL for the edited document	`Promise<string>`
`getEditedDocumentBlob()`	Get document as Blob object	`Promise<Blob>`
`captureToHiddenField()`	Capture document to hidden field as base64	`Promise<string>`
`getEditor()`	Get the editor instance	`DocEditor` or `null`
`destroy()`	Destroy an editor instance	`void`

See the Module Methods page for detailed documentation of each method.

Quick Start Example

// Initialize the editor
var config = {
    document: {
        fileType: 'docx',
        key: 'unique-document-key',
        title: 'My Document.docx',
        url: 'https://example.com/document.docx'
    },
    documentType: 'word'
};

var options = {
    onReady: function() {
        console.log('Editor is ready');
    },
    onDocumentReady: function() {
        console.log('Document loaded');
    },
    onError: function(error) {
        console.error('Editor error:', error);
    }
};

var editor = OnlyOfficeEditorModule.init('editorContainer', config, options);

// Later, get the edited document
OnlyOfficeEditorModule.getEditedDocumentBlob('editorContainer')
    .then(function(blob) {
        // Handle the document blob
        console.log('Document size:', blob.size);
    })
    .catch(function(error) {
        console.error('Failed to get document:', error);
    });

// Clean up when done
OnlyOfficeEditorModule.destroy('editorContainer');

Browser Compatibility

The module uses modern JavaScript features:

Promises (ES6)
Fetch API
FileReader API
Arrow functions (in some contexts)

Ensure your target browsers support these features or include appropriate polyfills.

User Control

JavaScript API

Handlers

Introduction

Accessing the Module

Module Architecture

Prerequisites

Core Concepts

Container ID

Configuration Object

Options Object

Available Methods

Quick Start Example

Browser Compatibility

Next Steps

Module Methods

Configuration

Build docs developers (and LLMs) love

User Control

JavaScript API

Handlers

​Introduction

​Accessing the Module

​Module Architecture

​Prerequisites

​Core Concepts

​Container ID

​Configuration Object

​Options Object

​Available Methods

​Quick Start Example

​Browser Compatibility

​Next Steps

Module Methods

Configuration

Build docs developers (and LLMs) love

Introduction

Accessing the Module

Module Architecture

Prerequisites

Core Concepts

Container ID

Configuration Object

Options Object

Available Methods

Quick Start Example

Browser Compatibility

Next Steps