Get Started
Plugins
Macros
More information

Photo Editor

Description

Connects the Toast UI Image Editor for editing images right in the document: cropping, resizing, applying effects, etc.

Plugin type: visual, non-system.

Supported editors: documents, spreadsheets, presentations.

PhotoEditor
Installation

Available by default in the cloud, on-premises and desktop versions of ONLYOFFICE editors.

You can remove it following the desktop, on-premises, or cloud installation instructions.

The plugin guid: {07FD8DFA-DFE0-4089-AL24-0730933CC80A}.

Usage
  1. Select an image in your document.
  2. Find the plugin on the Plugins tab.
  3. Below the image, you will find different settings for editing.
  4. After setting all the parameters up, press the OK button.
Plugin structure

Repository on GitHub: https://github.com/ONLYOFFICE/plugin-photoeditor.

  1. config.json, index.html and code.js
  2. Icons
  3. The translations folder contains translations into Russian, German, Spanish, Czech and French.
  4. index_about.html for the plugin About window
  5. Third-party services:
    • jQuery - a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development (https://jquery.com). License: MIT License.
    • Toast UI Image Editor is a full featured image editor that uses HTML5 Canvas. It's easy to use and provides powerful filters (https://ui.toast.com/tui-image-editor). License: MIT License.
Config
{
    "name": "Photo Editor",
    "nameLocale": {
        "ru": "Фоторедактор",
        "fr": "Photo Editor",
        "es": "Editor de Fotos",
        "de": "Foto-Editor"
    },
    "guid": "asc.{07FD8DFA-DFE0-4089-AL24-0730933CC80A}",
    "baseUrl": "",

    "variations": [
        {
            "description": "Photo Editor",
            "descriptionLocale": {
                "ru": "Фоторедактор",
                "fr": "Photo Editor",
                "es": "Editor de Fotos",
                "de": "Foto-Editor"
            },
            "url": "index.html",

            "icons": [ "icon.png", "icon@2x.png", "icon2.png", "icon2@2x.png" ],
            "isViewer": false,
            "EditorsSupport": [ "word", "cell", "slide" ],

            "isVisual": true,
            "isModal": true,
            "isInsideMode": false,

            "initDataType": "html",
            "initData": "",

            "isUpdateOleOnResize": false,

            "buttons": [
                {
                    "text": "Ok",
                    "primary": true
                },
                {
                    "text": "Cancel",
                    "primary": false,
                    "isViewer": false,
                    "textLocale": {
                        "ru": "Отмена",
                        "fr": "Annuler",
                        "es": "Cancelar",
                        "de": "Abbrechen"
                    }
                }
            ],

            "size": [ 10000, 10000 ]
        },
        {
            "description": "About",
            "descriptionLocale": {
                "ru": "Справка",
                "fr": "À propos",
                "es": "Sobre programa",
                "de": "Über"
            },
            "url": "index_about.html",

            "icons": [ "icon.png", "icon@2x.png", "icon2.png", "icon2@2x.png" ],
            "isViewer": false,
            "EditorsSupport": [ "word", "cell", "slide" ],

            "isVisual": true,
            "isModal": true,
            "isInsideMode": false,

            "initDataType": "none",
            "initData": "",

            "isUpdateOleOnResize": false,

            "size": [ 392, 147 ]
        }
    ]
}
Methods and events

The main plugin code is located here.

Support

If you want to request a feature or report a bug regarding this plugin, use the issues section on GitHub.