Filament RichEditor

The Media Library provides a plugin for Filament's RichEditor component, allowing users to insert images from the Media Library directly into the rich editor content. When a user clicks the toolbar button, a modal opens with a MediaPicker to select a file and an alt text field. The selected image is then inserted into the editor.

Images are stored by their ID rather than their URL. This means that the URL is resolved dynamically each time the content is loaded or rendered, which ensures that temporary URLs (e.g. for private S3 buckets) are always fresh and never expire.

Setup

use Filament\Forms\Components\RichEditor\Models\Concerns\InteractsWithRichContent;
use Filament\Forms\Components\RichEditor\Models\Contracts\HasRichContent;
use Illuminate\Database\Eloquent\Model;
use RalphJSmit\Filament\MediaLibrary\Filament\Forms\Components\RichEditor\Plugins\MediaPlugin;

class Post extends Model implements HasRichContent
{
    use InteractsWithRichContent;

    protected function setUpRichContent(): void
    {
        $plugin = MediaPlugin::make();

        $this
            ->registerRichContent('content')
            ->plugins([$plugin])
            ->fileAttachmentProvider($plugin->getFileAttachmentProvider());
    }
}

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->enableToolbarButtons([
        'insertFile',
    ])

{!! $post->renderRichContent('content') !!}

{{ $post->getRichContentAttribute('content') }}

JSON storage (optional)

The integration works with both HTML and JSON storage. If you prefer to store content as JSON, add the json() call when registering the rich content attribute:

protected function setUpRichContent(): void
{
    $plugin = MediaPlugin::make();

    $this
        ->registerRichContent('content')
        ->json()
        ->plugins([$plugin])
        ->fileAttachmentProvider($plugin->getFileAttachmentProvider());
}

Make sure to also add the array cast to your model and call json() on the RichEditor field:

RichEditor::make('content')
    ->json()
    ->enableToolbarButtons([
        'insertFile',
    ])

When storing as HTML, image IDs are preserved via the data-id attribute on the <img> tag. When storing as JSON, the ID is stored as an attribute on the image node. Both formats work identically with the file attachment provider.

How it works

When a user inserts an image from the Media Library, the following data is stored on the image node:

The src (URL) is generated on-the-fly and never persisted to the database. This happens automatically at three points:

1. Loading the editor -- when existing content is loaded into the RichEditor, the src is refreshed for each image.
2. Saving content -- the src is stripped from the content before saving to the database, ensuring no stale or expired URLs are stored.
3. Rendering content -- when the content is rendered (via renderRichContent() or in a Filament table/infolist), the src is resolved from the image ID.

This approach ensures that images always have a valid URL, even when using private storage disks that require temporary URLs.

Picking a conversion when inserting

When conversions are enabled on the MediaLibraryItemDriver, the insert-file modal shows an extra Conversion select. Pick a conversion (e.g. medium, thumb) to embed that specific size instead of the original. The conversion key is appended to the stored id as a composite identifier – so the choice persists across loads and the correct conversion URL is resolved at render time.

If no conversions are enabled, or the editor is inserting a non-image file, the select is hidden automatically.

Default alt text

When you insert an image, the Alt text field is pre-filled from the item's stored alt_text value. This keeps captions and alt attributes consistent across every place the image appears, and saves you from re-typing the same description per insertion. You can still override the alt text for a specific insertion if you want it to differ from the default.