Languages

Version

Theme

表单

Markdown 编辑器

简介

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

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
Markdown editor

安全

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

当 Filament 在 TextColumnTextEntry 等组件中从数据库输出原始 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 作为参数注入到该函数中。 Learn more about utility injection.
Utility Type Parameter Description
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.

上传图片到编辑器

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

use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
    ->fileAttachmentsDisk('s3')
    ->fileAttachmentsDirectory('attachments')
除了允许静态值之外,fileAttachmentsDisk()fileAttachmentsDirectory() 方法也接受一个函数动态计算。你可以将多个 utility 作为参数注入到该函数中。 Learn more about utility injection.
Utility Type Parameter Description
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.
Edit on GitHub

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

Previous
富文本编辑器