Getting started with plugins
Here are some fundamental concepts for building plugins step by step:
- Adjusting the plugin style
- Preparing the plugin for publication
Step 1. Coding
Create a plugin folder with the following files: config.json,
Use plugin methods and events while writing the plugin code.
Step 2. Adjusting the plugin style
Add the ONLYOFFICE style sheet to the index.html file to adjust your plugin to the ONLYOFFICE editor style:
<link rel="stylesheet" href="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.css">
Step 3. Localizing
Create the translations folder in the plugin directory with .json files for each language you want to add the translation for.
Follow the instructions here to localize and apply the translations.
Step 4. Preparing the plugin for publication
- Create an informative About window for your plugin. Add a short description and the plugin version, the company developer name and link to its website.
Follow the instructions here to create an About variation in the config.json file.
Prepare icons for the plugin and put them into the main plugin folder. Make sure that they fulfil the following requirements:
Icons with the lowest ID value are placed first to specify the application icons.
- icon.png - 40x40;
- firstname.lastname@example.org - 80x80;
- icon2.png - 26x26;
- email@example.com- 52x52.
- Don’t forget about the readme file where you can add a detailed plugin description, installation and usage instructions, known issues, etc.
Put this file into the main plugin folder.
Step 5. Testing
Put all the prepared files to the plugin folder. That’s it!
Now you can connect it to the desktop, on-premises
or cloud versions of ONLYOFFICE editors and test.
Step 6. Publishing
If you want your plugin to be available to other users on ONLYOFFICE App Directory,
suggest it for publishing by contacting us at firstname.lastname@example.org.
Code samples are available at https://github.com/ONLYOFFICE/sdkjs-plugins.
If you are looking for ready-to-use plugins, please visit ONLYOFFICE App Directory.