README

对于 Laravel 8.x 及更早版本，请使用最新的 0.4 版本。

此包通过 Composer 提供了 php 文件（+自动加载）和资源文件（使用发布命令），集成了elFinder。它还提供了一些独立、tinymce 和 ckeditor 的示例视图。文件将从单独的构建仓库更新。

注意：请使用php artisan elfinder:publish代替旧的发布命令，以备将来更改！

安装

使用 Composer 安装此包

composer require barryvdh/laravel-elfinder

您需要使用以下 artisan 命令将资源复制到公共文件夹

php artisan elfinder:publish

请记住，每次更新后都要发布资源（或将其添加到 composer.json 中的 post-update-cmd 命令中）

路由

在 ElfinderServiceProvider 中添加了路由。您可以在配置中设置路由的分组参数。您可以更改前缀或过滤/中间件。如果您想要完全自定义，您可以扩展 ServiceProvider 并覆盖map()函数。

配置

php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config

默认配置要求在公共文件夹中有一个名为 'files' 的目录。您可以通过发布配置文件来更改此设置。

视图

您可以通过复制资源/views 文件夹来覆盖默认视图。您也可以使用vendor:publish命令来完成此操作。

php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=views

使用文件系统磁盘

Laravel 有能力使用 Flysystem 适配器作为本地/云磁盘。您可以使用disks配置将这些磁盘添加到 elFinder。

以下示例添加了local磁盘和my-disk。

'disks' => [
    'local',
    'my-disk' => [
        'URL' => url('to/disk'),
        'alias' => 'Local storage',
    ]
],

您可以通过提供一个数组来提供额外的选项，例如 URL、别名等。请在此处查看所有选项。如果您不提供 URL，则 URL 将由磁盘本身生成。

使用 Glide 处理图像

有关Glide使用的详细信息，请参阅elfinder-flysystem-driver。以下是一个使用自定义 Laravel 磁盘和 Glide 的基本示例：

1. 将磁盘添加到您的 apps 配置/filesystems 磁盘中

   'public' => [
       'driver' => 'local',
       'root'   => base_path().'/public',
   ],

   提示：您可以使用extend方法注册自己的驱动程序，如果您想使用非默认的 Flysystem 磁盘。

2. 为您的磁盘创建一个 Glide 服务器，例如在glide/<path>路由上，使用缓存路径

   Route::get('glide/{path}', function($path){
       $server = \League\Glide\ServerFactory::create([
           'source' => app('filesystem')->disk('public')->getDriver(),
       'cache' => storage_path('glide'),
       ]);
       return $server->getImageResponse($path, Input::query());
   })->where('path', '.+');

3. 将磁盘添加到您的 elFinder 配置中

   'disks' => [
       'public' => [
           'glideURL' => '/glide',
       ],
   ],

4. (可选) 将glideKey也添加到配置中，并在您的 glide 路由中使用 Glide HttpSignature 验证密钥。

现在您应该在 elFinder 中看到根 'public'，其中包含公共文件夹中的文件，Glide 生成了缩略图。图像的 URL 也将指向 Glide 服务器。

TinyMCE 5.x

您可以使用以下路由/elfinder/tinymce5使用 tinyMCE 5 集成。

route('elfinder.tinymce5');

在 TinyMCE 初始化代码中，添加以下行

file_picker_callback : elFinderBrowser

然后添加以下函数（将elfinder_url更改为您系统上的正确路径）

function elFinderBrowser (callback, value, meta) {
    tinymce.activeEditor.windowManager.openUrl({
        title: 'File Manager',
        url: elfinder_url,
        /**
         * On message will be triggered by the child window
         * 
         * @param dialogApi
         * @param details
         * @see https://www.tiny.cloud/docs/ui-components/urldialog/#configurationoptions
         */
        onMessage: function (dialogApi, details) {
            if (details.mceAction === 'fileSelected') {
                const file = details.data.file;
                
                // Make file info
                const info = file.name;
                
                // Provide file and text for the link dialog
                if (meta.filetype === 'file') {
                    callback(file.url, {text: info, title: info});
                }
                
                // Provide image and alt text for the image dialog
                if (meta.filetype === 'image') {
                    callback(file.url, {alt: info});
                }
                
                // Provide alternative source and posted for the media dialog
                if (meta.filetype === 'media') {
                    callback(file.url);
                }
                
                dialogApi.close();
            }
        }
    });
}

TinyMCE 4.x

您可以使用以下路由使用 tinyMCE 集成，默认为/elfinder/tinymce4。

route('elfinder.tinymce4');

在 TinyMCE 初始化代码中，添加以下行

file_browser_callback : elFinderBrowser

然后添加以下函数（将elfinder_url更改为您系统上的正确路径）

function elFinderBrowser (field_name, url, type, win) {
  tinymce.activeEditor.windowManager.open({
    file: '<?= route('elfinder.tinymce4') ?>',// use an absolute path!
    title: 'elFinder 2.0',
    width: 900,
    height: 450,
    resizable: 'yes'
  }, {
    setUrl: function (url) {
      win.document.getElementById(field_name).value = url;
    }
  });
  return false;
}

TinyMCE 3.x

您可以使用以下路由添加tinyMCE集成（默认：/elfinder/tinymce）

route('elfinder.tinymce');

在 TinyMCE 初始化代码中，添加以下行

file_browser_callback : 'elFinderBrowser'

然后添加以下函数（将elfinder_url更改为您系统上的正确路径）

function elFinderBrowser (field_name, url, type, win) {
  var elfinder_url = '/elfinder/tinymce';    // use an absolute path!
  tinyMCE.activeEditor.windowManager.open({
    file: elfinder_url,
    title: 'elFinder 2.0',
    width: 900,
    height: 450,
    resizable: 'yes',
    inline: 'yes',    // This parameter only has an effect if you use the inlinepopups plugin!
    popup_css: false, // Disable TinyMCE's default popup CSS
    close_previous: 'no'
  }, {
    window: win,
    input: field_name
  });
  return false;
}

CKeditor 4.x

您可以使用以下路由添加CKeditor集成

'elfinder.ckeditor'

在CKeditor配置文件中

config.filebrowserBrowseUrl = '/elfinder/ckeditor';

独立弹出选择器

要使用href、按钮或其他元素触发弹出窗口以使用elFinder，您需要执行以下操作。

添加对弹出窗口的支持，我们使用了Jacklmoore的jQuery colorbox（不包括在内），但您可以使用任何其他库，显然需要相应地调整以下说明。

添加所需的路由

您可以使用以下操作添加弹出窗口

'Barryvdh\Elfinder\ElfinderController@showPopup'

添加所需的资源

请确保已按上述说明发布了此包的公共资源。然后在页面的<head>部分中包含所需的colorbox样式（我们建议example1样式，但任何样式都行）

<link href="/assets/css/colorbox.css" rel="stylesheet">

Colorbox依赖于jQuery，因此请确保已在您的页面中包含它，然后在jQuery文件包含之后某处添加jQuery Colorbox的脚本，如下所示...

<script type="text/javascript" src="/assets/js/jquery.colorbox-min.js"></script>

现在在您的<body>标签关闭之前添加对弹出脚本的超链接。还提供了一个未压缩版本，如果您希望修改colorbox配置。只需将其复制到您的资产位置，并根据需要进行调整/压缩。

<script type="text/javascript" src="/packages/barryvdh/elfinder/js/standalonepopup.min.js"></script>

用法

为了使用查找器填充输入，只需添加您希望填充的输入，确保使用ID（一旦选择了文件/图片，将用于更新值）......

<label for="feature_image">Feature Image</label>
<input type="text" id="feature_image" name="feature_image" value="">

现在只需添加您希望用于触发弹出窗口的元素，确保添加类popup_selector以及包含与您希望填充的输入的ID相匹配的值的data-inputid属性，如下所示。

<a href="" class="popup_selector" data-inputid="feature_image">Select Image</a>

您可以在页面上放置尽可能多的元素，只需确保每个元素都有唯一的ID，并在选择器上相应地设置data-updateid属性。