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
console.log("work")
window.Asc.plugin.init = function init() {}
window.Asc.plugin.button = function button(id) {
this.executeCommand("close", "")
}
window.Asc.plugin.event_onContextMenuShow = function event_onContextMenuShow(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", () => {
window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem1Sub1"])
})
window.Asc.plugin.attachContextMenuClickEvent("onClickItem1Sub2", () => {
window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem1Sub2"])
})
window.Asc.plugin.attachContextMenuClickEvent("onClickItem2", () => {
window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem2"])
})
window.Asc.plugin.attachContextMenuClickEvent("onClickItem3", () => {
window.Asc.plugin.executeMethod("InputText", ["clicked: onClickItem3"])
})
window.Asc.plugin.attachContextMenuClickEvent("onClickItem4", () => {
console.log("clicked: onClickItem4")
})
window.Asc.plugin.event_onTargetPositionChanged = function event_onTargetPositionChanged() {
console.log("event: onTargetPositionChanged")
}
Methods and events
- button
- init
- onTargetPositionChanged
- attachContextMenuClickEvent
- executeMethod ("AddContextMenuItem")
- executeMethod ("InputText")
Support
If you want to request a feature or report a bug regarding this plugin, use the issues section on GitHub.