tadejkan/laravel-elfinder

一个用于集成elFinder 2的Laravel包

v0.4.4 2019-09-19 21:14 UTC

README

对于Laravel 4,请使用0.2分支

Packagist License Latest Stable Version Total Downloads

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

注意:使用php artisan elfinder:publish代替旧的发布命令,以进行未来的更改!

安装

使用Composer要求此包

composer require barryvdh/laravel-elfinder

将ServiceProvider添加到app/config/app.php中的providers数组中

Barryvdh\Elfinder\ElfinderServiceProvider::class

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

php artisan elfinder:publish

请记住,每次更新后都要发布资源(或在composer.json的post-update-cmd中添加命令)

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

配置

默认配置需要public文件夹中名为'files'的目录。您可以通过发布配置文件来更改此设置。

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

在您的config/elfinder.php中,您可以更改默认文件夹、访问回调或定义自己的根目录。

视图

您可以通过复制资源/views文件夹来覆盖默认视图。您也可以使用vendor:publish命令来做这件事

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

使用文件系统磁盘

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

此示例添加了local磁盘和my-disk

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

您可以通过提供数组来提供额外选项,例如URL、别名等。请在此处查看所有选项。

使用Glide进行图片处理

有关elfinder-flysystem-driverGlide的用法,请参阅elfinder-flysystem-driver。一个使用自定义Laravel磁盘和Glide的基本示例将是

  1. 将磁盘添加到您的应用程序配置的filesystems disks中

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

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

  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 HttpSignature在您的glide路由中验证密钥

现在,您应该在elFinder中看到一个名为'public'的根目录,其中包含您的public文件夹中的文件,并由Glide生成缩略图。URL也将指向Glide服务器,用于图像。

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

独立弹出选择器

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

添加弹出窗口支持,我们使用了 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 属性。