Markdown editor

#Overview

The markdown editor allows you to edit and preview markdown content, as well as upload images using drag and drop.

use Filament\Forms\Components\MarkdownEditor;
 
MarkdownEditor::make('content')
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')

#Customizing the toolbar buttons

You may set the toolbar buttons for the editor using the toolbarButtons() method:

use Filament\Forms\Components\MarkdownEditor;
 
MarkdownEditor::make('content')
    ->toolbarButtons([
        'attachFiles',
        'blockquote',
        'bold',
        'bulletList',
        'codeBlock',
        'heading',
        'italic',
        'link',
        'orderedList',
        'redo',
        'strike',
        'table',
        'undo',
    ])
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->toolbarButtons([
        'attachFiles',
        'blockquote',
        'bold',
        'bulletList',
        'codeBlock',
        'heading',
        'italic',
        'link',
        'orderedList',
        'redo',
        'strike',
        'table',
        'undo',
    ])

Alternatively, you may disable specific buttons using the disableToolbarButtons() method:

use Filament\Forms\Components\MarkdownEditor;
 
MarkdownEditor::make('content')
    ->disableToolbarButtons([
        'blockquote',
        'strike',
    ])
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->disableToolbarButtons([
        'blockquote',
        'strike',
    ])

#Uploading images to the editor

You may customize how images are uploaded using configuration methods:

use Filament\Forms\Components\MarkdownEditor;
 
MarkdownEditor::make('content')
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory('attachments')
    ->fileAttachmentsVisibility('private')
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory('attachments')
    ->fileAttachmentsVisibility('private')

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion