darvis/livewire-flux-editor-filemanager

Laravel Filemanager integration for Flux TipTap Editor with image resize and align
61 3
Install
composer require darvis/livewire-flux-editor-filemanager
Latest Version:v1.1.3
PHP:^8.2
Maintainer: darvis

Flux Filemanager

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

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

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

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

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

Read more →

🔗 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 →

✏️ Image Editing

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

Read more →

🌍 Localization

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

Read more →

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

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