Feature: Add image insertion support to the editor

[SweetieMin]

Currently, the Flux editor is limited to text-based content. Users cannot directly insert or embed images to illustrate their ideas, which is a significant barrier for creating comprehensive documentation, tutorials, or visual-heavy content. Relying on external image hosting and manual linking is cumbersome and disrupts the workflow.

Describe the solution you'd like I would like to see a robust image insertion feature integrated into the editor. This should include:

Drag and Drop: The ability to drag image files directly from the local machine into the editor.

Clipboard Support: Support for pasting images directly from the clipboard (Ctrl+V).

Toolbar Action: An "Insert Image" button in the toolbar that opens a file picker.

Basic Image Handling: Options to resize, align (left, center, right), and add alt-text/captions once the image is inserted.

Format Support: Support for common web formats like PNG, JPG, and WebP.

[jeffchown]

@SweetieMin The flux:editor uses TipTap (https://tiptap.dev/) under-the-hood.

You can add TipTap extensions (see docs https://fluxui.dev/components/editor#extensions) and issue #2156 for some details.

[SweetieMin]

Hi @jeffchown, thank you for the clarification! Knowing that flux:editor uses TipTap under the hood is very helpful. I am now looking to implement an image upload feature. Ideally, I'd like to trigger a dropdown or a file input (similar to the native Flux style) that allows users to select or paste an image, which then inserts it directly into the editor. Could you point me toward the best way to integrate a custom 'Image' toolbar item that handles this flow?

[ArvidDeJong]

Hi @SweetieMin you can use my package for your image upload support :)

[ArvidDeJong]

I’ve built an image uploader using Laravel Filemanager that works out of the box with

https://packagist.org/packages/darvis/livewire-flux-editor-filemanager

The integration is straightforward and requires minimal setup, making it easy to start managing and uploading images immediately within your Livewire + Flux editor workflow.

Regards,
Arvid de Jong

[SweetieMin]

@ArvidDeJong Thank you so much for your help!
I’ll run some tests on my side and get back to you with feedback.
Really appreciate your work on the Laravel EditorFlux package 🙌

[SweetieMin]

Dear @ArvidDeJong,

After trying to integrate the Flux Filemanager, when I double-click an image inside the Flux editor, it does not open/import into the Flux editor as expected.

I’m not sure if I did something wrong in the setup.

This is what I currently have in 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()
And this is my Blade view:

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

When I double-click an image in the file manager, nothing is inserted into the Flux editor.

Could you please let me know if I’m missing any required configuration or event binding?

Thanks in advance!

[ArvidDeJong]

Hi @SweetieMin

I hope this helps, pleas let me know if you need more help

Filemanager + Flux editor setup

This document explains how to get the filemanager working in this Laravel 12 + Livewire/Flux setup.

1) Composer packages

Install these packages (if they are not already in your composer.json):

composer require darvis/livewire-flux-editor-filemanager
composer require unisharp/laravel-filemanager

Then publish the Laravel Filemanager config/assets:

php artisan vendor:publish --tag=lfm_config
php artisan vendor:publish --tag=lfm_public

2) Laravel Filemanager route

In this repository, use the CMS prefix with staff auth middleware.

Example (as in routes/cms.php):

Route::prefix('cms/laravel-filemanager')
    ->middleware(['auth:staff', \App\Http\Middleware\EnsureStaffEmailIsVerified::class])
    ->group(function () {
        \UniSharp\LaravelFilemanager\Lfm::routes();
    });

Important:

• The URL must match what your JavaScript uses.
• In this setup, that is: /cms/laravel-filemanager.

3) NPM packages

Required frontend packages:

npm install @tiptap/core @tiptap/extension-image @tiptap/extension-link prosemirror-state

Note:

• Use consistent TipTap major versions.
• In this repository, we use TipTap v2.

4) app.js configuration

At minimum, add this to resources/js/app.js:

import { initLaravelFilemanager } from "../../vendor/darvis/livewire-flux-editor-filemanager/resources/js/laravel-filemanager.js";
import {
    getDragDropConfig,
    processImageFile,
} from "../../vendor/darvis/livewire-flux-editor-filemanager/resources/js/drag-drop-config.js";
import Link from "@tiptap/extension-link";
import Image from "@tiptap/extension-image";
import { Plugin, PluginKey } from "prosemirror-state";

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";

document.addEventListener("flux:editor", (e) => {
    if (!e.detail?.registerExtension) return;

    // Register Link extension
    e.detail.registerExtension(
        Link.configure({
            openOnClick: false,
            HTMLAttributes: {
                rel: "noopener noreferrer nofollow",
            },
        }),
    );

    // Register Image extension
    e.detail.registerExtension(
        Image.configure({
            inline: true,
            allowBase64: true,
            HTMLAttributes: {
                class: "tiptap-image",
            },
        }),
    );

    // Optional extra ProseMirror plugins for drag/drop and paste
    // can be added here using Plugin and PluginKey.
});

initLaravelFilemanager();

Then rebuild assets:

npm run build

5) How to use it in Blade

Use it in your form like this:

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

This is exactly how you already use it in page edit.

What these props do:

• id: unique editor id in the DOM.
• wire:model: binds editor content to your Livewire property (for example, content).
• rows: initial editor height.

Extra variants:

<x-flux-filemanager-editor wire:model="summary" toolbar="minimal" rows="6" />
<x-flux-filemanager-editor wire:model="body" toolbar="full" rows="16" />

6) Render content on the website

Render saved HTML on the frontend:

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

7) Quick troubleshooting checklist

• Popup blocked: allow popups for your domain in the browser.
• 404 on filemanager: verify route prefix and middleware.
• Editor buttons do nothing: check that initLaravelFilemanager() is called in app.js.
• TipTap JS errors: verify all TipTap packages use the same major version.
• New code not visible: run npm run build and hard-refresh the browser.

[SweetieMin]

Dear @ArvidDeJong

2026-02-19.07-49-35.mov

I followed your instructions, but I still can’t insert images into the Flux Editor. Could you please let me know if I missed any steps or configured something incorrectly?

[joshhanley]

@SweetieMin and @ArvidDeJong can I suggest moving this to an issue on the filemanager repo? Thanks!

[ArvidDeJong]

Hi @SweetieMin

I have updated the docs en i think your problem is de NPM and app.js config

https://github.com/ArvidDeJong/livewire-flux-editor-filemanager

Feel free to open an issue in my repo

[ArvidDeJong]

Try it live: Flux editor with Laravel Filemanager

Curious how darvis/livewire-flux-editor-filemanager feels in a real app? There is now a live demo at fluxui-filemanager.com, with no install, no Flux Pro licence and no setup needed.

👉 Open the live demo

You get your own sandbox: an editor with example content and your own folder in the file manager. Try it out:

• Insert images from Laravel Filemanager with the image button
• Resize and align an image with a single click
• Edit alt text, title, classes and styles with a double click
• Link to files such as PDFs, and click a link to edit it
• Drop or paste image files straight into the editor

Like what you see?

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

🌐 Website · 📖 Documentation · 📦 Packagist

If the demo saves you time, a ⭐ on the repository is much appreciated.