Filament 中文文档

主题

全部文档

Markdown 编辑器 ​

简介 ​

Markdown 编辑器可让你编辑和预览 Markdown 内容，并支持拖放上传图片。

php
use Filament\Forms\Components\MarkdownEditor;

MarkdownEditor::make('content')
Markdown 编辑器Markdown 编辑器

安全性 ​

默认情况下，编辑器会输出原始 Markdown 与 HTML，并发送到后端。攻击者可以拦截组件的值，并向后端发送不同的原始 HTML 字符串。因此，在输出 Markdown 编辑器产生的 HTML 时必须进行消毒；否则网站可能面临跨站脚本（XSS）漏洞。

当 Filament 在 TextColumn 和 TextEntry 等组件中从数据库输出原始 HTML 时，会对其进行消毒以移除危险的 JavaScript。但若你在自己的 Blade 视图中输出 Markdown 编辑器的 HTML，则需自行负责。一种做法是使用 Filament 的 sanitizeHtml() 辅助方法，这与上述组件消毒 HTML 所用的工具相同：

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

DANGER

Filament 内置的 HTML 消毒器允许内联 style 属性，以支持字体颜色、文本高亮、图片尺寸等富文本格式化功能。这意味着像 background: url(...) 或 position: fixed 这类 CSS 属性不会从消毒后的 HTML 中剥离。若内容来自不可信用户，应考虑收紧默认配置。有关如何自定义消毒器，请参阅 安全性文档。

自定义工具栏按钮 ​

你可以使用 toolbarButtons() 方法设置编辑器的工具栏按钮。此处所示选项即为默认值：

php
use Filament\Forms\Components\MarkdownEditor;

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

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

TIP

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

自定义工具栏按钮的 Markdown 编辑器自定义工具栏按钮的 Markdown 编辑器

设置高度 ​

你可以通过 minHeight() 和 maxHeight() 方法控制编辑器高度，二者接受任意 CSS 长度值：

php
use Filament\Forms\Components\MarkdownEditor;

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

编辑器默认最小高度为 10rem。内容超过 maxHeight() 后，编辑器停止增高并变为可滚动。两个方法可单独使用——minHeight() 设置起始高度但仍允许增高，maxHeight() 限制最大高度。向 minHeight() 传入 null 可为可交互编辑器使用 3rem 最小高度；向 maxHeight() 传入 null 则取消上限。当 minHeight() 为 null 时，禁用状态的内容使用其自然高度。这些约束在编辑器禁用时同样适用。

TIP

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

向编辑器上传图片 ​

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

php
use Filament\Forms\Components\MarkdownEditor;

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

TIP

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

校验上传的图片 ​

你可以使用 fileAttachmentsAcceptedFileTypes() 方法控制上传图片所接受的 MIME 类型列表。默认接受 image/png、image/jpeg、image/gif 和 image/webp：

php
use Filament\Forms\Components\MarkdownEditor;

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

你可以使用 fileAttachmentsMaxSize() 方法控制上传图片的最大文件大小，单位为千字节。默认最大为 12288 KB（12 MB）：

php
use Filament\Forms\Components\MarkdownEditor;

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