Plugins in ONLYOFFICE: A quick start guide for developers

30 April 2020 By Ksenija 2 2,641 views
Share

A plugin in ONLYOFFICE is an easy way to add new features to the editors. Along with the pre-installed set, it’s possible to add your own plugin using ONLYOFFICE API. Read this post to learn where to start if you want to build and integrate your plugins.

Plugins in ONLYOFFICE

Plugins types

We distinguish the following types:

  • Visual & non-visual. Non-visual plugins deliver buttons to apply some transformations to the doc (e.g. the Speech plugin that converts the selected text into speech, or the Send plugin that allows sending docs as mail attachments rights from the desktop app). Visual plugins open a separate window or a panel (e.g. Highlight code that allows highlighting syntax of the code selecting the necessary language, style, and background color, or the Photo Editor plugin).
  • OLE object. Allows saving info from external resources to the resulting file (e.g. plugin that allows embedding YouTube videos into the document).
  • System & non-system. System plugins work in the background all the time the editors are launched (e.g. e2e encryption in the desktop app). The non-system ones start with a click of the corresponding button (the majority of the plugins in ONLYOFFICE).
  • Input helper. Has its own window that appears and disappears when you type the text. Its location is tied to the cursor. An example is the Autocomplete plugin that helps users type faster.

Discover all available plugins examples on GitHub.

Plugin structure

A plugin in ONLYOFFICE is always a folder that contains at least three files:

  • Plugin configuration file (config.json).
  • Plugin entry point (index.html).
  • The code file itself (pluginCode.js).

This folder can also contain additional files such as icons, translations, readme, etc.

How to build your own plugin

Create a new folder where you’ll put all the files and follow the next steps:

  1. Create a .js file with the JavaScript code of the plugin.
  2. Create a main HTML file to specify in what iframe your plugin works.
  3. Create a configuration file with the data needed to register the plugin in the editors.
  4. Localize your plugin if needed.
  5. Create an About page.
How to add your plugin to ONLYOFFICE editors

After you complete the above steps, you can add your plugin to the editors. The installation process depends on the solution you use.

  • For ONLYOFFICE server solutions: Put the plugin folder to the Document Server folder, or just add the corresponding line to the config.
  • For ONLYOFFICE Desktop Editors: Archive your plugin folder, change its extension to .plugin. Then, go to the Plugins tab in the editors, click Manage Plugins → Add plugin, browse for the .plugin file and upload it to the application.
  • For Cloud Service and ONLYOFFICE Personal: In this case, you can add new plugins as a Chrome extension. Learn how >>

If you have already built your own plugin, it’s possible to add it to our App Directory. Just email us at marketing@onlyoffice.com to learn the details.

Useful links

Plugins samples in the GitHub repository

ONLYOFFICE API documentation on plugins

Our detailed article about plugins on Dzone

ONLYOFFICE App Directory

Comments (2)
  1. Thiago - Reply
    May 6, 2021 at 8:25 am

    Eu segui o tutorial de como add plugin no ONLYOFFICE, porém o arquivo não carrega e não aparece na aba de plugins. Percebi que não existe tutorias recentes em formato de VIDEO (facilitaria muito para que não tem muita experiência). COMO EU ADICIONO O PLUGIN?

Add a comment