Context menu and events

Description

Tracks the events of calling the context menu and clicking on its items. It also tracks the cursor position changes.

Plugin type: non-visual, non-system.

Supported editors: documents.

Installation

Copy the code below and save it in the config.json, index.html, and code.js files respectively. Download the resources folder with icons from this plugin. Put all the files and the folder into the plugin folder and install it following the desktop, on-premises, or cloud installation instructions.

Usage

Open the Plugins tab and press ContextMenu and Events.
Place a cursor anywhere in the document, press the right mouse button, and go to Item 1 -> Subitem 2. The clicked: onClickItem1Sub2 message will be inserted at the cursor position.
Select any text in the document, press the right mouse button, and click Item 3. The clicked: onClickItem3 message will be inserted in place of the selected text.
Select any shape or image in the document, press the right mouse button, and click Item 4. The clicked: onClickItem4 message will appear in the console.
Change the cursor position. The event: onTargetPositionChanged message will appear in the console.

Plugin structure

config.json, index.html, and code.js
Icons

Config

{
    "name" : "ContextMenu and Events",
    "guid" : "asc.{B617C899-03AA-476F-8D2C-1B7272489CBC}",

    "variations" : [
        {
            "description" : "example context menu and events",
            "url"         : "index.html",

            "icons": [ "resources/light/icon.png", "resources/light/icon@2x.png" ],
            "icons2": [
                {
                    "style" : "light",
                    
                    "100%": {
                        "normal": "resources/light/icon.png"
                    },
                    "125%": {
                        "normal": "resources/light/icon@1.25x.png"
                    },
                    "150%": {
                        "normal": "resources/light/icon@1.5x.png"
                    },
                    "175%": {
                        "normal": "resources/light/icon@1.75x.png"
                    },
                    "200%": {
                        "normal": "resources/light/icon@2x.png"
                    }
                },
                {
                    "style" : "dark",
                    
                    "100%": {
                        "normal": "resources/dark/icon.png"
                    },
                    "125%": {
                        "normal": "resources/dark/icon@1.25x.png"
                    },
                    "150%": {
                        "normal": "resources/dark/icon@1.5x.png"
                    },
                    "175%": {
                        "normal": "resources/dark/icon@1.75x.png"
                    },
                    "200%": {
                        "normal": "resources/dark/icon@2x.png"
                    }
                }
            ],
            "isViewer"        : false,
            "EditorsSupport"  : ["word"],

            "isVisual"        : false,
            "isModal"         : false,
            "isInsideMode"    : false,
            "isSystem"        : false,

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

            "buttons"        : [ ],

            "events" : [
                "onContextMenuShow",
                "onTargetPositionChanged"
            ]
        }
    ]
}

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>example context menu and events</title>
        <script type="text/javascript" src="https://onlyoffice.github.io/sdkjs-plugins/v1/plugins.js"></script>    
        <script src="scripts/code.js"></script>
    </head>
    <body>
    </body>
</html>

Plugin code

(function(window, undefined){

    console.log('work');
    window.Asc.plugin.init = function()
    {
    };

    window.Asc.plugin.button = function(id)
    {
        this.executeCommand("close", "");
    };

    window.Asc.plugin.event_onContextMenuShow = function(options) {
        switch (options.type)
        {
            case "Target":
            {
                this.executeMethod("AddContextMenuItem", [{
                    guid : this.guid,
                    items : [
                        {
                            id : "onClickItem1",
                            text : { en : "Item 1", de : "Menü 1" },
                            items : [
                                {
                                    id : "onClickItem1Sub1",
                                    text : { en : "Subitem 1", de : "Untermenü 1" },
                                    disabled : true
                                },
                                {
                                    id : "onClickItem1Sub2",
                                    text : { en : "Subitem 2", de : "Untermenü 2" },
                                    separator: true
                                }
                            ]
                        },
                        {
                            id : "onClickItem2",
                            text : { en : "Item 2", de : "Menü 2" }
                        }
                    ]
                }]);
                break;
            }
            case "Selection":
            {
                this.executeMethod("AddContextMenuItem", [{
                    guid : this.guid,
                    items : [
                        {
                            id : "onClickItem3",
                            text : { en : "Item 3", de : "Menü 3" }
                        }
                    ]
                }]);
                break;
            }
            case 'Image':
            case 'Shape':
            {
                this.executeMethod("AddContextMenuItem", [{
                    guid : this.guid,
                    items : [
                        {
                            id : "onClickItem4",
                            text : { en : "Item 4", de : "Menü 4" }
                        }
                    ]
                }]);
                break;
            }
            default:
                break;
        }
    };

    window.Asc.plugin.attachContextMenuClickEvent("onClickItem1Sub1", function(){
        window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem1Sub1"]);
    });

    window.Asc.plugin.attachContextMenuClickEvent("onClickItem1Sub2", function(){
        window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem1Sub2"]);
    });

    window.Asc.plugin.attachContextMenuClickEvent("onClickItem2", function(){
        window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem2"]);
    });

    window.Asc.plugin.attachContextMenuClickEvent("onClickItem3", function(){
        window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem3"]);
    });

    window.Asc.plugin.attachContextMenuClickEvent("onClickItem4", function(){
        console.log("clicked: onClickItem4");
    });

    window.Asc.plugin.event_onTargetPositionChanged = function()
    {
        console.log("event: onTargetPositionChanged");

    };

})(window, undefined);

Methods and events

Support

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