> ## Documentation Index
> Fetch the complete documentation index at: https://filament-34a8cf01.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Markdown editor
> [!WARNING]
>
> You are currently viewing the documentation for Filament 4.x, which is a previous version of Filament.
>
> Looking for the current stable version? Visit the [5.x documentation](https://filament-34a8cf01.mintlify.site/5.x/forms/markdown-editor.md).
## Introduction
The markdown editor allows you to edit and preview markdown content, as well as upload images using drag and drop.
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\MarkdownEditor;
MarkdownEditor::make('content')
```
Loading preview
## Security
By default, the editor outputs raw Markdown and HTML, and sends it to the backend. Attackers are able to intercept the value of the component and send a different raw HTML string to the backend. As such, it is important that when outputting the HTML from a Markdown editor, it is sanitized; otherwise your site may be exposed to Cross-Site Scripting (XSS) vulnerabilities.
When Filament outputs raw HTML from the database in components such as `TextColumn` and `TextEntry`, it sanitizes it to remove any dangerous JavaScript. However, if you are outputting the HTML from a Markdown editor in your own Blade view, this is your responsibility. One option is to use Filament's `sanitizeHtml()` helper to do this, which is the same tool we use to sanitize HTML in the components mentioned above:
```blade theme={"theme":"gruvbox-dark-hard"}
{!! str($record->content)->markdown()->sanitizeHtml() !!}
```
> [!CAUTION]
>
> Filament's built-in HTML sanitizer permits inline `style` attributes in order to support rich text formatting features such as font colors, text highlighting, and image sizing. This means that CSS properties like `background: url(...)` or `position: fixed` will not be stripped from sanitized HTML. If your content comes from untrusted users, you should consider restricting the default configuration. See the [security documentation](https://filament-34a8cf01.mintlify.site/4.x/advanced/security.md#customizing-the-sanitizer) for details on how to customize the sanitizer.
## Customizing the toolbar buttons
You may set the toolbar buttons for the editor using the `toolbarButtons()` method. The options shown here are the defaults:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\MarkdownEditor;
MarkdownEditor::make('content')
->toolbarButtons([
['bold', 'italic', 'strike', 'link'],
['heading'],
['blockquote', 'codeBlock', 'bulletList', 'orderedList'],
['table', 'attachFiles'],
['undo', 'redo'],
])
```
Each nested array in the main array represents a group of buttons in the toolbar.
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
Loading preview
## Setting the height
You may control the editor's height by defining the `minHeight()` and `maxHeight()` methods, which accept any CSS length value:
```php theme={"theme":"gruvbox-dark-hard"}
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.
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
## Uploading images to the editor
Images may be uploaded to the editor. They will always be uploaded to a publicly available URL with public storage permissions, since generating temporary file upload URLs is not supported in static content. You may customize where images are uploaded using configuration methods:
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\MarkdownEditor;
MarkdownEditor::make('content')
->fileAttachmentsDisk('s3')
->fileAttachmentsDirectory('attachments')
```
[Learn more about utility injection.](https://filament-34a8cf01.mintlify.site/4.x/forms/overview.md#field-utility-injection)
### 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:
```php theme={"theme":"gruvbox-dark-hard"}
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):
```php theme={"theme":"gruvbox-dark-hard"}
use Filament\Forms\Components\MarkdownEditor;
MarkdownEditor::make('content')
->fileAttachmentsMaxSize(5120) // 5 MB
```
## Generating fake Markdown
You can generate Markdown in database factories using Faker's `filamentMarkdown()` method. You can build the content by chaining methods, then store it using `toString()`:
```php theme={"theme":"gruvbox-dark-hard"}
use Illuminate\Database\Eloquent\Factories\Factory;
class PostFactory extends Factory
{
public function definition(): array
{
return [
'content' => fake()
->filamentMarkdown()
->heading()
->paragraphs(3)
->bulletList()
->toString(),
];
}
}
```
You can generate a complete article using the `article()` method. An article starts with an introductory paragraph followed by sections with level-two headings. The `depth` argument recursively adds nested sections, using the next heading level for each depth:
```php theme={"theme":"gruvbox-dark-hard"}
'content' => fake()
->filamentMarkdown()
->article(depth: 2)
->toString(),
```
In this example, the article contains level-two sections with level-three subsections. The maximum depth is `5`, corresponding to heading levels two through six.
You can generate the following block content:
* `heading()`
* `paragraphs()`
* `bulletList()`
* `orderedList()`
* `blockquote()`
* `codeBlock()`
* `horizontalRule()`
* `hardBreak()`
* `table()`
* `image()`
The `paragraphs()` method can generate links and bold, italic, strike-through, and inline code formatting:
```php theme={"theme":"gruvbox-dark-hard"}
'content' => fake()
->filamentMarkdown()
->paragraphs(
count: 3,
links: true,
bold: true,
italic: true,
)
->toString(),
```
All random values use the same Faker generator, so seeded Faker output remains reproducible. The `MarkdownFaker` class is also macroable, allowing you to register additional fluent methods that generate Markdown supported by your application.
[Edit this page on GitHub](https://github.com/filamentphp/filament/edit/4.x/packages/forms/docs/11-markdown-editor.md)
## Sponsored by
[Your logo here](https://github.com/sponsors/danharrin)
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.