Markdown 编辑器

#简介

Markdown 编辑器允许你编辑和预览 Markdown 内容，以及使用拖拽上传图片。

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')

#安全

默认情况下，该编辑器输出原始 Markdown 和 HTML，并将其发送给后端。攻击者能够拦截组件的值，并将不同的原始 HTML 字符串发送到后端。因此，从 Markdown 编辑器输出 HTML 时，对其进行净化非常重要；否则，你的网站可能会暴露于跨站点脚本(XSS)漏洞。

当 Filament 在 TextColumn 和 TextEntry 等组件中从数据库输出原始 HTML 时，它会对其进行净化，以删除任何危险的 JavaScript。但是，如果你在自己的 Blade 视图中输出来自 Markdown 编辑器的 HTML，这是你的责任。一种选择是使用 Filament 的 sanctizeHtml() 助手来执行此操作，这与我们在上述组件中用于净化 HTML 的工具相同：

{!! str($record->content)->markdown()->sanitizeHtml() !!}

#自定义工具栏按钮

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

use Filament\Forms\Components\MarkdownEditor;

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

主数组中的每个嵌套数组都表示工具栏中的一个按钮分组。

除了允许静态值之外，toolbarButtons() 方法也接受一个函数动态计算其值。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Field	Filament\Forms\Components\Field	$component	The current field component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current form data. Validation is not run.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Raw state	mixed	$rawState	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.
State	mixed	$state	The current value of the field. Validation is not run.

#设置高度

你可以通过定义 minHeight() 和 maxHeight() 方法来控制编辑器的高度，这些方法接受任何 CSS 长度值：

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->minHeight('12rem')
    ->maxHeight('24rem')

编辑器默认的最小高度为 10rem。当内容高度超过 maxHeight() 设定的值时，编辑器将停止自动增高并变为可滚动状态。这两个方法既可以单独使用，也可以组合使用：minHeight() 用于设定初始高度（同时允许编辑器随内容增高），而 maxHeight() 则用于限制编辑器的最大高度。若向 minHeight() 传入 null，交互式编辑器的最小高度将设为 3rem；若向 maxHeight() 传入 null，则会取消高度上限。当 minHeight() 为 null 且编辑器处于禁用状态时，内容将以其自然高度显示。上述高度限制同样适用于编辑器被禁用的情况。

除了允许静态值之外，minHeight() 和 maxHeight() 方法也接受一个函数动态计算它们的值。你可以将各种 utility 作为参数注入到这些函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Field	Filament\Forms\Components\Field	$component	The current field component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current form data. Validation is not run.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Raw state	mixed	$rawState	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.
State	mixed	$state	The current value of the field. Validation is not run.

#上传图片到编辑器

你可以将图片上传到编辑器中。图片总是上传到有公共存储权限的公共 URL 中，因为静态内容中不支持生成临时文件 URL。你可以使用配置方法，自定义文件上传位置：

use Filament\Forms\Components\MarkdownEditor;

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

除了允许静态值之外，fileAttachmentsDisk() 和 fileAttachmentsDirectory() 方法也接受一个函数动态计算。你可以将各种 utility 作为参数注入到该函数中。

了解更多 utility 注入详情。

Utility	类型	参数	描述
Field	Filament\Forms\Components\Field	$component	The current field component instance.
Get function	Filament\Schemas\Components\Utilities\Get	$get	A function for retrieving values from the current form data. Validation is not run.
Livewire	Livewire\Component	$livewire	The Livewire component instance.
Eloquent model FQN	?string<Illuminate\Database\Eloquent\Model>	$model	The Eloquent model FQN for the current schema.
Operation	string	$operation	The current operation being performed by the schema. Usually create, edit, or view.
Raw state	mixed	$rawState	The current value of the field, before state casts were applied. Validation is not run.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.
State	mixed	$state	The current value of the field. Validation is not run.

#验证上传的图片

你可以使用 fileAttachmentsAcceptedFileTypes() 方法来控制上传图片时允许的 MIME 类型列表。默认情况下，系统接受 image/png、image/jpeg、image/gif 和 image/webp：

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->fileAttachmentsAcceptedFileTypes(['image/png', 'image/jpeg'])

你可以使用 fileAttachmentsMaxSize() 方法来控制上传图像的最大文件大小。大小以千字节为单位指定。默认情况下，最大大小为 12288 KB (12 MB)：

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->fileAttachmentsMaxSize(5120) // 5 MB

Edit on GitHub

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