Weave Code
Filament Markdown Editor Laravel Package
spatie/filament-markdown-editor
Filament form field providing a Markdown editor powered by EasyMDE. Supports image uploads with configurable disk/visibility and automatically highlights code blocks. Drop it into your resource forms like any other field.
A markdown editor for Filament with code highlighting and image uploads
Frequently asked questions about Filament Markdown Editor
- How do I add the Spatie Filament Markdown Editor to an existing Filament resource?
- Use the `MarkdownEditor` class in your resource’s `form()` method, just like any other Filament field. For example: `MarkdownEditor::make('content')->required()->columnSpanFull()`. Configure image uploads with methods like `fileAttachmentsDisk()` and `fileAttachmentsVisibility()`.
- Which Laravel and Filament versions does this package support?
- The package requires **Filament v3+** and is compatible with Laravel 9+. Always check the [release notes](https://github.com/spatie/filament-markdown-editor/releases) for version-specific updates before upgrading. Test thoroughly if using older Filament versions.
- Can I customize the toolbar or disable certain Markdown features?
- Yes, you can configure the toolbar via PHP methods like `toolbarOptions()` or override EasyMDE settings with JavaScript hooks. For example, disable image uploads by omitting `fileAttachmentsDisk()`. Refer to the [EasyMDE docs](https://easymde.com/) for advanced customization.
- How do I handle image uploads with S3 or other storage backends?
- Configure the storage disk in Filament’s `config/filament.php` under `disks`. Use `fileAttachmentsDisk('s3')` in your `MarkdownEditor` field. Ensure your storage disk is properly set up in Laravel’s `filesystems.php` and accessible by Filament’s storage system.
- Does this package support syntax highlighting for custom languages?
- Yes, it uses **Prism.js** for syntax highlighting, which supports over 150 languages out of the box. To add custom languages, include Prism plugins in your Filament assets or extend the editor’s JavaScript configuration. Check [Prism.js docs](https://prismjs.com/) for details.
- Will this editor work with my existing Filament forms without breaking them?
- Absolutely. The package is a **Filament form field**, so it integrates like any other field (e.g., TextInput, RichEditor). No architectural changes are needed—just replace a textarea or RichEditor field with `MarkdownEditor`. Test in a staging environment first.
- How do I sanitize user-uploaded Markdown to prevent XSS attacks?
- Filament’s built-in sanitization handles basic risks, but for stricter control, use PHP’s `filter_var()` or a package like `spatie/laravel-html` to strip unsafe HTML. Configure allowed tags via `allowedTags()` in the editor. Always validate Markdown before saving to the database.
- Are there performance concerns with EasyMDE and Prism.js in production?
- EasyMDE and Prism.js are bundled and optimized for Filament, but heavy usage may impact page load. For large-scale apps, consider lazy-loading the editor or using Filament’s asset pipeline to defer non-critical scripts. Test in staging to monitor performance.
- Can I migrate existing textarea or RichEditor fields to this Markdown editor?
- Yes, but plan for data migration. Use Laravel’s `DB::update()` or a seeder to convert stored HTML/text to Markdown. For example, use a package like `paragonie/markdown` to convert HTML to Markdown before saving. Test thoroughly to avoid data loss.
- What alternatives exist for Markdown editing in Filament, and why choose this one?
- Alternatives include TinyMCE or CKEditor with Markdown plugins, but they lack Filament-native integration and code highlighting. This package is **lightweight**, Filament-first, and includes built-in image uploads and Prism.js syntax highlighting—ideal for technical documentation or CMS-like content.
Weaver
How can I help you explore Laravel packages today?