Markdown editor

#概述

Markdown 编辑器允许你编辑和预览 Markdown 内容，同时可以使用拖拽上传图片：

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

MarkdownEditor::make('content')

#自定义工具栏按钮

使用 toolbarButtons() 方法，你可以设置编辑器的工具栏按钮。此例中展示的是默认选项：

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',
    ])

此外，你可以使用 disableToolbarButtons() 方法禁用指定按钮：

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

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

要禁用所有工具栏按钮，请将 toolbarButtons([]) 设置为空数组或者使用 disableAllToolbarButtons()。

#上传图片到编辑器

使用配置方法你可以自定义图片上传方式：

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