elFinderにカスタムコンテキストメニュー項目を追加する

Question

私はelfinderを使用しており、コンテキストメニューにコマンドを追加することで新しい機能を追加したいと考えています。私はプロジェクトのgithub問題追跡ツールの解決策を見つけましたが、それを働かせることはできません。私がしていることは次のとおりです。

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 

コンテキストメニュー項目が表示されず、コンソールにエラーメッセージが表示されません。私は初期化によって上書きされた場合には、initimageのcontextmenu - > "files"の下にeditimageを入れてみました。

Answer 1

私は解決策を見つけた：の例では、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'); 

}); 

希望は、この同じ問題を持つ人を支援します。

Answer 2

答えをいただきありがとうございます。

明確ではなかったことの1つは、変数がどのように通過するかということでした。このページを見つけた誰のためにそう

、....

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