时间戳

首页 > 解决方案 > 无法将 ElFinder 集成到 Angular 项目中

angular - 无法将 ElFinder 集成到 Angular 项目中

问题描述

我正在尝试将 ElFinder ( https://github.com/Studio-42/elFinder ) 集成到我的 Angular 项目中，但我似乎不知道如何让它工作。Readme.md 没有提供有关如何设置使用 ElFinder 的完整应用程序的示例，我不知所措。我已经下载了最新的稳定版本（压缩）版本，但我不确定我应该如何从我的应用程序中使用它，我的猜测是我应该使用解压缩文件夹的内容启动服务器，然后以某种方式（即使我不知道如何）使我的程序从其服务器运行的任何地方“调用”elfinder，在我的 html 中的特定点，以便我可以将 ElFinder 资源管理器与我的其他元素集成页。

有谁知道这是否是正确的方法，以及如何从 HTML / .ts 文件中“调用”ElFinder？

标签： angularintegrationelfinder

解决方案

我终于设法将 elfinder 集成到 angular 9，我标记了解决方案，这样没有人必须像我一样挣扎。由于我的后端由 ASP.NET Core 3.1 组成，我安装了这个连接器（https://github.com/gordon-matt/elFinder.NetCore），然后在你的 angular.json 文件中导入脚本和样式 在此处输入图像描述

将其放在您的视图中之后：<div id="elfinder"></div>

把它放在你的组件中，在你的 ngOnInit() 中：

            $(document).ready(function () {
                var myCommands = elFinder.prototype._options.commands;
                var disabled = ['callback', 'chmod', 'editor', 'netmount', 'ping', 'search', 'zipdl', 'help']; // Not yet implemented commands in elFinder.NetCore
                elFinder.prototype.i18.en.messages.TextArea = "Edit";
                var self = this;
                $.each(disabled, function (i, cmd) {
                    (self.idx = $.inArray(cmd, myCommands)) !== -1 && myCommands.splice(self.idx, 1);
                });

                var options = {
                    url: '/el-finder/file-system/connector', // Default (Local File System)
                //customData: { folder: '@Model.Folder', subFolder: '@Model.SubFolder' }, // customData passed in every request to the connector as query strings. These values are used in FileController's Index method.*@
                   
                    rememberLastDir: false, // Prevent elFinder saving in the Browser LocalStorage the last visited directory
                        commands: myCommands,
                            //lang: 'pt_BR', // elFinder supports UI and messages localization. Check the folder Content\elfinder\js\i18n for all available languages. Be sure to include the corresponding .js file(s) in the JavaScript bundle.
                            uiOptions: { // UI buttons available to the user
                    toolbar: [
                        ['back', 'forward'],
                        ['reload'],
                        ['home', 'up'],
                        ['mkdir', 'mkfile', 'upload'],
                        ['open', 'download'],
                        ['undo', 'redo'],
                        ['info'],
                        ['quicklook'],
                        ['copy', 'cut', 'paste'],
                        ['rm'],
                        ['duplicate', 'rename', 'edit'],
                        ['selectall', 'selectnone', 'selectinvert'],
                        ['view', 'sort']
                    ]
                },
                //onlyMimes: ["image", "text/plain"] // Get files of requested mime types only
                lang: 'fr', // Change language
            };
               
        });
            
        })(jQuery);

然后最后管理好你的进口，它的工作原理！

推荐阅读