Adding a custom context menu item to elFinder

Question

I use elfinder, and I would like to add new functionality by adding a command to the context menu. I found a solution for the project’s gitub tracker, but I can’t get it to work. That's what I'm doing:

var elf; jQuery().ready(function() { elFinder.prototype._options.commands.push('editimage'); elFinder.prototype._options.contextmenu.files.push('editimage'); elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image'; elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten'; elFinder.prototype.commands.editimage = function() { this.exec = function(hashes) { console.log('hallo'); } } elf = jQuery('#elfinder').elfinder({ ... //elfinder initialization 

The context menu item does not appear, the error message does not appear in the console. I also tried adding editimage to contextmenu → "files" in the init part in case initialization was overwritten.

Answer 1

I found a solution: the examples do not show the fact that there should have a function called this.getstate inside the elFinder.prototype.commands.yourcommand function. It should return 0 when the icon is on, and -1 when it is off.

Thus, the complete code for adding your own menu item or context menu item is as follows:

 var elf; jQuery().ready(function() { elFinder.prototype.i18.en.messages['cmdeditimage'] = 'Edit Image'; elFinder.prototype.i18.de.messages['cmdeditimage'] = 'Bild bearbeiten'; elFinder.prototype._options.commands.push('editimage'); elFinder.prototype.commands.editimage = function() { this.exec = function(hashes) { //do whatever } this.getstate = function() { //return 0 to enable, -1 to disable icon access return 0; } } ... elf = jQuery('#elfinder').elfinder({ lang: 'de', // language (OPTIONAL) url : '/ext/elfinder-2.0-rc1/php/connector.php', //connector URL width:'100%', uiOptions : { // toolbar configuration toolbar : [ ... ['quicklook', 'editimage'], /*['copy', 'cut', 'paste'],*/ ... ]}, contextmenu : { ... // current directory file menu files : [ 'getfile', '|','open', 'quicklook', 'editimage', ... ] } }).elfinder('instance'); }); 

Hope this helps someone with the same issue.

Answer 2

Thanks for the answer, great!

One thing that was unclear was how the variables go.

So, for everyone who finds this page ....

 elFinder.prototype.commands.editpres = function() { this.exec = function(hashes) { var file = this.files(hashes); var hash = file[0].hash; var fm = this.fm; var url = fm.url(hash); var scope = angular.element("body").scope(); scope.openEditorEdit(url); } // Getstate configured to only light up button if a file is selected. this.getstate = function() { var sel = this.files(sel), cnt = sel.length; return !this._disabled && cnt ? 0 : -1; } } 

To display the icon, add the following to your css file:

 .elfinder-button-icon-editpres { background:url('../img/icons/editpres.png') no-repeat; }