PHPackages darvis/livewire-flux-editor-filemanager - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [File & Storage](/categories/file-storage) 4. / 5. darvis/livewire-flux-editor-filemanager ActiveLibrary[File & Storage](/categories/file-storage) darvis/livewire-flux-editor-filemanager ======================================= Laravel Filemanager integration for Flux TipTap Editor with image resize and align v1.1.4(3mo ago)3166[1 issues](https://github.com/ArvidDeJong/livewire-flux-editor-filemanager/issues)MITPHPPHP ^8.2CI failing Since Jan 22Pushed 3mo agoCompare [ Source](https://github.com/ArvidDeJong/livewire-flux-editor-filemanager)[ Packagist](https://packagist.org/packages/darvis/livewire-flux-editor-filemanager)[ RSS](/packages/darvis-livewire-flux-editor-filemanager/feed)WikiDiscussions main Synced 3d ago READMEChangelog (6)Dependencies (16)Versions (8)Used By (0) Flux Filemanager ================ [](#flux-filemanager) Laravel Filemanager integration for Flux TipTap Editor with powerful image and file management. Features -------- [](#features) - 🖼️ **Image Upload** - Upload and insert images via Laravel Filemanager - 🎯 **Drag & Drop** - Drag images directly into the editor - 📋 **Paste Images** - Paste screenshots and copied images - 📐 **Image Resize** - Quick resize menu (25%, 50%, 75%, 100%, custom) - 🎯 **Image Alignment** - Left, center, right alignment - ✏️ **Image Editing** - Edit alt text, title, size, alignment, classes, and styles - 🔗 **File Links** - Add links to PDFs, documents, and other files - 🎨 **Custom Styling** - Add CSS classes and inline styles - 🌍 **Multilingual** - Dutch, English, and German support - ⚡ **Flux UI** - Seamless Livewire Flux integration Requirements ------------ [](#requirements) - PHP 8.2+ - Laravel 11+ or 12+ or 13+ - Livewire 3+ or 4+ - Flux UI with Flux Pro - Laravel Filemanager Quick Start ----------- [](#quick-start) ### 1. Install Package [](#1-install-package) ``` composer require darvis/livewire-flux-editor-filemanager ``` ### 2. Run Automated Installation [](#2-run-automated-installation) ``` php artisan flux-filemanager:install ``` For CI/non-interactive environments: ``` php artisan flux-filemanager:install --no-interaction ``` This interactive command will: - ✅ Install Laravel Filemanager - ✅ Publish configurations and assets - ✅ Enable standard LFM routes (`/filemanager`) automatically - ✅ Create storage directories - ✅ Install NPM dependencies - ✅ Configure `resources/js/app.js` automatically - ✅ Build assets ### 3. Configure Routes [](#3-configure-routes) Use standard Laravel Filemanager package routes via `config/lfm.php`: - `use_package_routes` => `true` - `url_prefix` => `filemanager` The installer configures this automatically. ### 4. Add to Your JavaScript [](#4-add-to-your-javascript) Add to `resources/js/app.js`: ``` import { initLaravelFilemanager } from "../../vendor/darvis/livewire-flux-editor-filemanager/resources/js/laravel-filemanager.js"; import Link from "@tiptap/extension-link"; import Image from "@tiptap/extension-image"; import "../../vendor/darvis/livewire-flux-editor-filemanager/resources/css/tiptap-image.css"; import "../../vendor/darvis/livewire-flux-editor-filemanager/resources/css/file-link-modal.css"; // See examples/app.js for the Flux-safe extension registration block. initLaravelFilemanager(); ``` When you run `php artisan flux-filemanager:install`, this setup (including Flux-safe extension registration) is added to `resources/js/app.js` automatically. Then build: ``` npm run build ``` > **📖 For detailed installation with TipTap configuration, see [docs/INSTALLATION.md](docs/INSTALLATION.md)** Usage ----- [](#usage) ### Basic Usage [](#basic-usage) ``` Content ``` ### Toolbar Presets [](#toolbar-presets) ``` {{-- Minimal toolbar --}} {{-- Full toolbar --}} {{-- Custom toolbar --}} ``` ### Display Content [](#display-content) ``` {!! $page->content !!} ``` Advanced Features ----------------- [](#advanced-features) ### 🎯 Drag & Drop and Paste [](#-drag--drop-and-paste) - Drag images directly into the editor - Paste screenshots with `Cmd/Ctrl + V` - Automatic base64 conversion [Read more →](docs/DRAG-DROP.md) ### 🔗 File Links [](#-file-links) - Add links to PDFs, Word docs, Excel, ZIP files - Configure link text, target, CSS classes, and styles - Click file link button (🔗) in toolbar [Read more →](docs/FILE-UPLOAD.md) ### ✏️ Image Editing [](#️-image-editing) - **Single click** - Quick resize menu (25%, 50%, 75%, 100%, custom) - **Double click** - Full edit modal (alt, title, alignment, classes, styles) [Read more →](docs/IMAGE-EDITING.md) ### 🌍 Localization [](#-localization) - Built-in: Dutch, English, German - Easy to add new languages - Automatic locale detection [Read more →](docs/LOCALIZATION.md) Configuration ------------- [](#configuration) Publish the config file: ``` php artisan vendor:publish --tag=flux-filemanager-config ``` Customize in `config/flux-filemanager.php`: - Filemanager URL - Popup dimensions - Resize presets - Error messages [See full configuration options →](docs/INSTALLATION.md#configuration) Documentation ------------- [](#documentation) - [Installation Guide](docs/INSTALLATION.md) - Detailed installation with TipTap configuration - [File Upload & Links](docs/FILE-UPLOAD.md) - Add downloadable file links - [Image Editing](docs/IMAGE-EDITING.md) - Resize, align, and style images - [Drag & Drop](docs/DRAG-DROP.md) - Drag and paste images - [Localization](docs/LOCALIZATION.md) - Multi-language support - [Workflow](docs/WORKFLOW.md) - Technical implementation details Examples -------- [](#examples) Complete working examples in [`examples/`](examples/) directory: - `app.js` - Full TipTap configuration - `EditorDemo.php` - Livewire component - `editor-demo.blade.php` - Blade view Quick package pages: - Demo: `/darvis/editor-demo` - Checklist: `/darvis/filemanager-checklist` Testing ------- [](#testing) ``` composer test ``` Author ------ [](#author) **Arvid de Jong** Email: License ------- [](#license) MIT ### Health Score 40 — FairBetter than 86% of packages Maintenance74 Regular maintenance activity Popularity17 Limited adoption so far Community6 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~10 days Total 7 Last Release 102d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/24c445b7580e09ff72b8340d1423886148c4c8a249d0a828c98285109e7e5663?d=identicon)[darvis](/maintainers/darvis) --- Top Contributors [![ArvidDeJong](https://avatars.githubusercontent.com/u/7394837?v=4)](https://github.com/ArvidDeJong "ArvidDeJong (12 commits)") --- Tags editorfilemanagerfluxlivewiretiptap ### Code Quality TestsPest ### Embed Badge ![Health badge](/badges/darvis-livewire-flux-editor-filemanager/health.svg) ``` [![Health](https://phpackages.com/badges/darvis-livewire-flux-editor-filemanager/health.svg)](https://phpackages.com/packages/darvis-livewire-flux-editor-filemanager) ``` ### Alternatives [tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 725173.2k14](/packages/tallstackui-tallstackui)[illuminate/filesystem The Illuminate Filesystem package. 16165.1M3.2k](/packages/illuminate-filesystem)[tomshaw/electricgrid A feature-rich Livewire package designed for projects that require dynamic, interactive data tables. 119.4k](/packages/tomshaw-electricgrid) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)