rockkeeper / laravel-elfinder
一个用于集成elFinder 2的Laravel包
Requires
- php: >=5.4.0
- barryvdh/elfinder-flysystem-driver: ^0.1.4
- illuminate/support: 5.0.x|5.1.x|5.2.x
- league/flysystem: ^1.0
- league/flysystem-cached-adapter: ^1.0
- studio-42/elfinder: ~2.1.10
README
对于Laravel 4,请使用0.2分支!
本包通过Composer(+自动加载)和发布命令提供elFinder 2.1的PHP文件和资源。它还提供了一些示例视图,用于独立、tinymce和ckeditor。文件更新来自单独的构建仓库
注意:使用
php artisan elfinder:publish
代替旧的发布命令,以备将来更改!
安装
使用Composer安装此包
composer require barryvdh/laravel-elfinder
将ServiceProvider添加到app/config/app.php文件中的providers数组
'Barryvdh\Elfinder\ElfinderServiceProvider'
您需要使用以下Artisan命令将资源复制到public文件夹
php artisan elfinder:publish
请记住,在每次更新后发布资源(或将命令添加到composer.json中的post-update-cmd)
路由由ElfinderServiceProvider添加。您可以在配置中设置路由的分组参数。您可以更改前缀或路由的过滤器/中间件。如果您想要完全自定义,您可以扩展ServiceProvider并重写map()
函数。
配置
默认配置需要在public文件夹中创建一个名为'files'的目录。您可以通过发布配置文件来更改此设置。
php artisan vendor:publish --provider='Barryvdh\Elfinder\ElfinderServiceProvider' --tag=config
在您的config/elfinder.php中,您可以更改默认文件夹、访问回调或定义自己的根。
视图
您可以通过复制resources/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处理图像
有关Glide的使用,请参阅elfinder-flysystem-driver。以下是一个基本示例,使用自定义Laravel磁盘和Glide:
- 将磁盘添加到您的app/config/filesystems disks配置
'public' => [
'driver' => 'local',
'root' => base_path().'/public',
],
提示:如果您想使用非默认的Flysystem磁盘,可以使用
extend
方法注册自己的驱动程序
- 为您的磁盘创建一个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', '.+');
- 将磁盘添加到您的elfinder配置
'disks' => [
'public' => [
'glideURL' => '/glide',
]
],
- (可选) 将
glideKey
也添加到配置中,并在您的Glide路由中使用Glide HttpSignature验证密钥
现在您应该在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';
独立弹出选择器
要使用 href、按钮或其他元素触发弹出窗口来使用 elFinder,您需要执行以下操作。
添加对弹出窗口的支持,我们使用了 Jacklmoore 的 jQuery colorbox(不包含),但您可以使用任何其他,显然需要相应地调整以下说明。
添加所需的路由
您可以使用以下操作添加弹出窗口
'Barryvdh\Elfinder\ElfinderController@showPopup'
添加所需资源
确保您已按上述说明发布了此软件包的公共资产。然后,在您的页面 <head> 部分中包含所需的 colorbox 样式(我们建议使用 example1 样式,但任何样式都可以)
<link href="/assets/css/colorbox.css" rel="stylesheet">
Colorbox 依赖于 jQuery,因此请确保您已在您的页面中包含 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 属性。