README

Laravel Filemanager integration for Flux TipTap Editor with powerful image and file management.

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

PHP 8.2+
Laravel 11+ or 12+
Livewire 3+ or 4+
Flux UI with Flux Pro
Laravel Filemanager

Quick Start

1. Install Package

composer require darvis/livewire-flux-editor-filemanager

2. Run Automated Installation

php artisan flux-filemanager:install

This interactive command will:

✅ Install Laravel Filemanager
✅ Publish configurations and assets
✅ Create storage directories
✅ Install NPM dependencies
✅ Build assets

3. Configure Routes

Add to routes/web.php:

Route::prefix('cms/laravel-filemanager')->middleware(['auth'])->group(function () {
    \UniSharp\LaravelFilemanager\Lfm::routes();
});

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 '../../vendor/darvis/livewire-flux-editor-filemanager/resources/css/tiptap-image.css'
import '../../vendor/darvis/livewire-flux-editor-filemanager/resources/css/file-link-modal.css'

initLaravelFilemanager()

Then build:

npm run build

📖 For detailed installation with TipTap configuration, see docs/INSTALLATION.md

Usage

Basic Usage

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

Toolbar Presets

{{-- Minimal toolbar --}}
<x-flux-filemanager-editor wire:model="description" toolbar="minimal" />

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

{{-- Custom toolbar --}}
<x-flux-filemanager-editor wire:model="content" :toolbar="false">
    <flux:editor.toolbar>
        <flux:editor.bold />
        <flux:editor.image />
    </flux:editor.toolbar>
</x-flux-filemanager-editor>

Display Content

<div class="prose max-w-none">
    {!! $page->content !!}
</div>

Advanced Features

🎯 Drag & Drop and Paste

Drag images directly into the editor
Paste screenshots with Cmd/Ctrl + V
Automatic base64 conversion

Add links to PDFs, Word docs, Excel, ZIP files
Configure link text, target, CSS classes, and styles
Click file link button (🔗) in toolbar

Single click - Quick resize menu (25%, 50%, 75%, 100%, custom)
Double click - Full edit modal (alt, title, alignment, classes, styles)

Built-in: Dutch, English, German
Easy to add new languages
Automatic locale detection

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 →

Documentation

Installation Guide - Detailed installation with TipTap configuration
File Upload & Links - Add downloadable file links
Image Editing - Resize, align, and style images
Drag & Drop - Drag and paste images
Localization - Multi-language support
Workflow - Technical implementation details

Examples

Complete working examples in examples/ directory:

app.js - Full TipTap configuration
EditorDemo.php - Livewire component
editor-demo.blade.php - Blade view

Testing

composer test

Author

Arvid de Jong
Email: info@arvid.nl

License

MIT

darvis / livewire-flux-editor-filemanager

Maintainers

Details