README

A Laravel package that connects Laravel Filemanager to the rich text editor of Flux Pro in a Livewire application. Two toolbar buttons open the file manager in a popup to insert images and file links, images get a resize and align menu and an edit modal, an HTML button shows the source of the content to read or edit it, a table button with a menu inserts and edits tables, and image files can be dropped on the editor or pasted from the clipboard.

Try the live demo on fluxui-filemanager.com and use the editor, the file manager, the image menu and drag and drop in your browser before you install anything.

View and edit the HTML source

New in 1.7. The Flux editor has no way to see the HTML it writes. This package adds it: an HTML button opens the source of the content in a modal, where an editor reads it, changes it and applies the result with Apply or Cmd/Ctrl + Enter. The hint under the text area names the tags and attributes the editor would drop. A disabled editor shows the source read-only.

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

The full toolbar has the button, and toolbar="default | html-source" adds it to the default toolbar; see Toolbar buttons. HTML source has the details.

Features

An image button and a file link button that open Laravel Filemanager in a popup, for every Flux editor on the page
Single click on an image: preset widths, a custom percentage, and left, center and right alignment
Double click on an image: alt text, title, width, alignment, extra CSS classes and inline styles
File links with text, target, classes and styles; click a link in the editor to edit it
An HTML button that opens the source of the content in a modal, to read it or to edit it and apply the result
Toolbar on one line: toolbar="heading | bold italic | image link file-link", three presets, and preset names expand inside the string
A table button with a menu: insert a 3×3 table with a header row, add or delete rows and columns, header row and column on or off, merge or split cells, delete the table. Flux's editor runs the commands and styles the tables; the package adds the button, the menu and the setup lines that enable Flux's bundled table extensions
Horizontal rule, code block and clear formatting buttons
Drop and paste of image files, embedded as base64 or uploaded to Laravel Filemanager
Plain HTML output: <img>, <a> and <table> tags with attributes, no shortcodes
flux-filemanager:install sets up Laravel Filemanager, the npm packages and your app.js; flux-filemanager:check verifies the result
Language files for English, Dutch and German, also used by the JavaScript menus and modals

Requirements

PHP 8.2+, Laravel 11, 12 or 13, Livewire 3 or 4
Flux and Flux Pro 2.15.1 or newer, the first version that bundles the table extensions. The editor is a Flux Pro component, and Flux Pro needs a paid licence from fluxui.dev. Set up Flux Pro in your application first (php artisan flux:activate), so that Composer can reach the private Flux repository
Laravel Filemanager 2, installed as a dependency
Node with npm and Vite

The package adds no authentication and does not sanitise the HTML from the editor. Read Uploads and security before you give the editor to users.

Installation

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

Then make sure the file manager is behind a login. In config/lfm.php:

'middlewares' => ['web', 'auth'],

Quick start

In the Blade view of a Livewire component with a public string $content = ''; property:

<flux:field>
    <flux:label>Content</flux:label>
    <x-flux-filemanager-editor wire:model="content" />
    <flux:error name="content" />
</flux:field>

The component renders <flux:editor> with the image and file link buttons. $content receives the HTML. Your first editor has the complete example, from migration to public page.

Documentation

Full documentation: https://arviddejong.github.io/livewire-flux-editor-filemanager/

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
Toolbar buttons: turn buttons on and off, the presets, every button
Configuration: every config key and the component attributes
Image editing: the resize menu, the edit modal and the HTML they write
File links: insert and edit links to files
HTML source: open, read and edit the HTML of the content
Tables: insert and edit tables, the setup lines they need, and styling them on your site
Drag and drop: base64 or upload, and where the limits are checked
Uploads and security: what the package checks and what it leaves to Laravel Filemanager and your application
Localization: the language files, changing a text, adding a language
Testing: test a Livewire form that uses the editor
Troubleshooting: symptoms, causes and fixes, with the literal messages
How it works: the JavaScript and DOM contract
FAQ: short answers to common questions

Laravel Boost

The package ships a guideline and a skill for Laravel Boost. Run php artisan boost:install, or php artisan boost:update --discover in a project that already uses Boost.

Testing

composer test      # Pest
composer lint      # Pint, check only
composer format    # Pint, fixes
composer analyse   # Larastan

Installing the development dependencies needs a Flux Pro licence: composer config http-basic.composer.fluxui.dev your-email your-license-key.

Changelog

See CHANGELOG.md.

Support the package

If darvis/livewire-flux-editor-filemanager saves you time, buy me a beer 🍺: sponsor me on GitHub.

Contributing

See CONTRIBUTING.md.

Security

Found a security problem? Report it privately, see SECURITY.md.

License

MIT. See LICENSE.

darvis / livewire-flux-editor-filemanager

Package info

Security

Statistics

README

View and edit the HTML source

Features

Requirements

Installation

Quick start

Documentation

Laravel Boost

Testing

Changelog

Support the package

Contributing

Security

License