Laravel Filemanager, right inside the Flux editor
Insert images and file links from your own file manager, resize and align images, and drop or paste pictures straight into the Flux Pro rich text editor. One Composer package, one Blade component.
- PHP 8.2+
- Laravel 11–13
- Livewire 3–4
- Flux Pro 2
- MIT licensed
A weekend on the fjords
We left early, before the ferry got busy. By noon we stood at the edge of the cliff, high above the water.
Download the route (PDF)
Features
Everything your editor was missing
Flux Pro comes with a great rich text editor, built on Tiptap. This package connects it to the files your users already manage in Laravel Filemanager.
Images from your file manager
The image button opens Laravel Filemanager in a popup. Pick one or more images and they land in the editor.
Links to files
The paperclip button picks a PDF or any other file and inserts a link with your own text, target, classes and styles.
Resize and align
Click an image for a menu with 25%, 50%, 75%, 100% or your own width, and left, center or right alignment.
Edit image details
Double-click an image to set its alt text, title, extra classes and inline styles.
Drag, drop and paste
Drop an image file on the editor or paste a screenshot. Embedded as base64, or uploaded to Laravel Filemanager.
Checks its own installation
php artisan flux-filemanager:check goes through the config, routes, storage link, npm packages and build, and tells you what to fix.
Installation
Up and running in a few minutes
Your application needs Flux Pro and its Composer repository. The installer takes care of the rest: the Laravel Filemanager config and routes, the storage link, the npm packages and the setup in resources/js/app.js.
Full installation guide-
1Require the package
Terminal$ composer require darvis/livewire-flux-editor-filemanager -
2Run the installer
Terminal$ php artisan flux-filemanager:install -
3Use the component where you would use flux:editor
Blade<x-flux-filemanager-editor wire:model="content" /> -
4Something not working? Check the installation
Terminal$ php artisan flux-filemanager:check
Try it without installing anything
The live demo gives you your own sandbox: an editor with example content and your own folder in the file manager. Upload, crop, resize and save as much as you like. Only you see it, and every night at 03:00 (Europe/Amsterdam time) it goes back to the example.
How do I add image upload to the Flux Pro editor?
Install darvis/livewire-flux-editor-filemanager, run php artisan flux-filemanager:install and use <x-flux-filemanager-editor wire:model="content" /> instead of flux:editor. The image button then opens Laravel Filemanager in a popup, where you upload new images or pick existing ones to insert.
Does it work with the free version of Flux?
No. The rich text editor is part of Flux Pro, so your application needs a Flux Pro license and its Composer repository. The package itself is free and MIT licensed.
Which PHP, Laravel and Livewire versions are supported?
Version v1.10.0 supports PHP 8.2+, Laravel 11–13, Livewire 3–4, Flux Pro 2.
Where do dragged, dropped or pasted images go?
By default they are embedded in the HTML as base64. Set drag_drop.method to upload in config/flux-filemanager.php to upload them to Laravel Filemanager instead.
Why do the editor buttons do nothing?
Usually resources/js/app.js did not load, often right after a package update while npm run dev kept running. Run php artisan flux-filemanager:check: it checks the config, routes, storage link, npm packages, app.js and the build, and tells you what to fix.
Does the package protect the file manager or sanitise the HTML?
No. Protect Laravel Filemanager with the middlewares setting in config/lfm.php, and only render the editor HTML unescaped for editors you trust.
Sponsor
Help keep the package maintained
The package is free and MIT licensed. Sponsorship on GitHub pays for the CI that tests every release against several PHP and Laravel versions, the documentation site, and a fixed morning each month for issues, security reports and new Laravel releases.
Monthly or one-time, any amount.
Questions