Skip to content

Custom context menu command

Marlon Monzon edited this page Jan 16, 2018 · 8 revisions

Added from #257

Another example http://stackoverflow.com/questions/16604842/adding-a-custom-context-menu-item-to-elfinder/

To add a custom command you must follow this steps:

1) add the name of your custom command on document ready

$().ready(function() {
	var elf = $('#elfinder').elfinder({
		url : 'php/connector.php',
		commands : [
			'custom','open', 'reload', 'home', 'up', 'back', 'forward', 'getfile', 'quicklook', 
			'download', 'rm', 'duplicate', 'rename', 'mkdir', 'mkfile', 'upload', 'copy', 
			'cut', 'paste', 'edit', 'extract', 'archive', 'search', 'info', 'view', 'help', 'resize', 'sort', 'netmount'
		],
		contextmenu : {
			// navbarfolder menu
			navbar : ['open', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'info'],
			// current directory menu
			cwd    : ['reload', 'back', '|', 'upload', 'mkdir', 'mkfile', 'paste', '|', 'sort', '|', 'info'],
			// current directory file menu
			files  : ['getfile', '|', 'custom', 'quicklook', '|', 'download', '|', 'copy', 'cut', 'paste', 'duplicate', '|', 'rm', '|', 'edit', 'rename', 'resize', '|', 'archive', 'extract', '|', 'info']
		},
		
	}).elfinder('instance');
});

2) add the command name your language file

'cmdcustom'      : 'Custom command',

3) create a custom command file (you can copy an existing command from source) and include it in your main html

elFinder.prototype.commands.custom= function() {
          this.exec = function(hashes) {
                //implement what the custom command should do here
          }
          this.getstate = function() {
                //return 0 to enable, -1 to disable icon access
                return 0;
          }
}

4) add a css rule for your command

.elfinder-button-icon-custom { /* css here */ }
Clone this wiki locally