2013-05-17 61 views
6

我正在使用elfinder,并且我想通过向上下文菜单添加命令来添加新功能。我在项目的github问题跟踪器上找到了一个解决方案,但是我无法使其工作。这是我做的:向elFinder添加自定义上下文菜单项

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 

上下文菜单项不显示,在控制台中找不到错误消息。我也尝试在初始化部分的contextmenu - >“files”下放置editimage以防被初始化覆盖。

回答

20

我找到了解决方案:这些示例没有显示需要在elFinder.prototype.commands.yourcommand函数内部有函数this.getstate。它在启用图标时返回0,在禁用时返回-1。

因此,对于添加自己的菜单项或上下文菜单项中的全部代码如下所示:

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'); 

}); 

希望这可以帮助别人同样的问题。

+0

非常感谢你! – KryDos

+0

这终于挽救了许多小时的实验。想知道为什么elFinder团队不能像这样的答案写这样的doccu。再次感谢。 – jm666

+0

Yp这个技巧。太感谢了! – Gogol

4

感谢您的回答,太棒了!

有一点不清楚的是变量是如何通过的。

所以,对于其他人谁发现这个页面....

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; 
    } 
} 

为了让您的图标显示,以下内容添加到您的css文件:

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