laravel-elfinder

Use the elfinder.tinymce route. In your TinyMCE initialization, set file_browser_callback to the string 'elFinderBrowser' and implement the function using tinyMCE.activeEditor.windowManager.open.

// TinyMCE init
file_browser_callback : 'elFinderBrowser'

// Implementation
function elFinderBrowser (field_name, url, type, win) {
  var elfinder_url = '/elfinder/tinymce';
  tinyMCE.activeEditor.windowManager.open({
    file: elfinder_url,
    title: 'elFinder 2.0',
    width: 900,
    height: 450,
    resizable: 'yes',
    inline: 'yes',
    popup_css: false,
    close_previous: 'no'
  }, {
    window: win,
    input: field_name
  });
  return false;
}

You can override the default elFinder views by publishing them to your resources folder.

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

To use Glide for generating thumbnails and managing image URLs in elFinder, follow these steps:

1. Ensure your disk is configured in config/filesystems.php.
2. Create a Glide Server route in your routes/web.php that uses the disk's driver and a cache path.
3. Add the disk to your config/elfinder.php and provide the glideURL.

Example Glide route implementation:

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', '.+');

Example elFinder config:

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

Use the elfinder.tinymce4 route. In your TinyMCE initialization, set file_browser_callback to a function that opens the elFinder URL using tinymce.activeEditor.windowManager.open.

// TinyMCE init
file_browser_callback : elFinderBrowser

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

To integrate with CKEditor 4.x, use the elfinder.ckeditor route in your CKEditor configuration file.

config.filebrowserBrowseUrl = '/elfinder/ckeditor';

To install the package, require it via Composer. After installation, you must publish the assets to your public folder using the dedicated artisan command. It is recommended to run this command after every update or include it in your composer.json post-update hooks.

Note: For Laravel 8.x and older, use the latest 0.4 version of this package.

composer require barryvdh/laravel-elfinder
php artisan elfinder:publish

By default, elFinder expects a files directory in your public folder. To customize the default folder, the access callback, or define custom roots, publish the configuration file to config/elfinder.php.

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

You can integrate Laravel's Flysystem-based disks (local or cloud) into elFinder using the disks configuration key. You can provide a simple string for a standard disk or an array to include extra options like URL and alias.

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