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.

#Setting the height

You may control the editor’s height by defining the minHeight() and maxHeight() methods, which accept any CSS length value:

use Filament\Forms\Components\MarkdownEditor;

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

The editor has a minimum height of 10rem by default. Once the content exceeds maxHeight(), the editor stops growing and becomes scrollable. Each method may be used on its own — minHeight() sets a starting height while still allowing the editor to grow, and maxHeight() caps how tall it may become. Pass null to minHeight() to use a 3rem minimum height for the interactive editor, or to maxHeight() to remove the cap. Disabled content uses its natural height when minHeight() is null. These constraints also apply when the editor is disabled.

As well as allowing static values, the minHeight() and maxHeight() methods also accept functions to dynamically calculate them. You can inject various utilities into the functions as parameters.

了解更多 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.

#Validating uploaded images

You may use the fileAttachmentsAcceptedFileTypes() method to control a list of accepted mime types for uploaded images. By default, image/png, image/jpeg, image/gif, and image/webp are accepted:

use Filament\Forms\Components\MarkdownEditor;

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

You may use the fileAttachmentsMaxSize() method to control the maximum file size for uploaded images. The size is specified in kilobytes. By default, the maximum size is 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