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

上下文菜单项未显示，控制台中未找到任何错误消息。我还尝试将editimage放在init部分中的contextmenu-＆gt;“files”下，以防初始化时覆盖。

Answer 1

我找到了解决方案：这些示例并未显示您需要在this.getstate函数中具有一个名为elFinder.prototype.commands.yourcommand的函数。图标启用时应返回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

谢谢你的回答，太棒了！

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

所以，对于找到此页面的其他人来说......

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

将自定义上下文菜单项添加到elFinder

2 个答案: