Flux Editor Filemanager

darvis/livewire-flux-editor-filemanager is a Laravel package that connects Laravel Filemanager (a file browser and uploader, unisharp/laravel-filemanager) to the rich text editor of Flux Pro in a Livewire application. It adds an image button and a file link button to the editor toolbar, a resize and align menu and an edit modal for images, and drop and paste of image files.

The Flux editor with the image button, a selected image with its resize menu, and a file link

Who it is for

Laravel developers who already use the Flux Pro editor, or plan to, and want their editors to pick images and documents from a file manager instead of typing URLs.

What it does not do

  • It does not upload, store, crop or serve files. Laravel Filemanager does that, with its own routes and its own config/lfm.php.
  • It does not decide who may use the file manager. That is the middlewares setting in config/lfm.php.
  • It does not check uploads on the server. The size and type limits for dropped images are checked in the browser only.
  • It does not sanitise the HTML your editors write.
  • It does not include the editor itself. The editor is a paid Flux Pro component.

Uploads and security lists exactly what is checked, and where.

Requirements

  • PHP 8.2 or higher
  • Laravel 11, 12 or 13
  • Livewire 3 or 4
  • Flux Pro 2.0.2 or newer, which needs a paid licence from fluxui.dev
  • Laravel Filemanager 2, installed automatically as a dependency
  • Node and Vite with resources/js/app.js, the standard Laravel front-end setup

Install 

composer require darvis/livewire-flux-editor-filemanager
php artisan flux-filemanager:install
php artisan flux-filemanager:check

Then use the component where you would use <flux:editor>:

<x-flux-filemanager-editor wire:model="content" />

Pages

  • Installation: the Flux Pro requirement, the installer step by step, and how to check that it works
  • Your first editor: one complete example, from migration to the public page
  • Configuration: every key in config/flux-filemanager.php and the component attributes
  • Image editing: the image button, the resize menu, the edit modal and the HTML they write
  • File links: insert a link to a PDF or another file, and edit a link
  • Drag and drop: drop or paste images, as base64 or uploaded to Laravel Filemanager
  • Uploads and security: what the package checks, what Laravel Filemanager checks, and what nobody checks
  • Localization: the language files, changing a text, adding a language
  • Testing: test a Livewire form that uses the editor in your own application
  • Troubleshooting: symptoms, causes and fixes, with the literal messages
  • How it works: the JavaScript and DOM contract, for debugging and extending
  • FAQ: short answers to common questions