EasyAdmin Markdown Editor Field

Basic Usage

Use the field in the configureFields() method of any CRUD controller, exactly as you would use any built-in EasyAdmin field:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// src/Controller/Admin/ProductCrudController.php
namespace App\Controller\Admin;

use App\Entity\Product;
use EasyCorp\Bundle\EasyAdminBundle\Controller\AbstractCrudController;
use EasyCorp\Bundle\EasyAdminProBundle\Field\MarkdownEditorField;

class ProductCrudController extends AbstractCrudController
{
    public static function getEntityFqcn(): string
    {
        return Product::class;
    }

    public function configureFields(string $pageName): iterable
    {
        yield MarkdownEditorField::new('description');
    }
}

The field loads its own editor and rendering assets. You can use the usual EasyAdmin methods such as setLabel(), setHelp(), setColumns() and hideOnIndex(). See the fields documentation.

Options

Use setNumOfRows() to set the editor's minimum height. The default is 5 rows, and the value must be at least 1. The editor grows as you type:

1
2
3
4

yield MarkdownEditorField::new('description')
    ->setNumOfRows(10)
    ->setColumns(12)
    ->setHelp('Use Markdown for headings, lists and links.');

How Values Are Displayed

• On new and edit pages, you get the editor, toolbar and preview.
• On detail pages, the formatted content appears directly in the page.
• On index pages, a "View content" button opens it in a modal.

Security

The field renders Markdown in the browser with marked and sanitizes the resulting HTML with DOMPurify to remove unsafe markup.

Your database keeps the original Markdown. If you display it elsewhere, such as on your public website, sanitize the HTML there too. Sanitization inside EasyAdmin doesn't protect other places where you render the value.

Images and Other Markdown Features

The toolbar covers common formatting: headings, bold, italic, lists, quotes, links and code. For syntax without a toolbar button, such as tables, type the Markdown directly.

There isn't an image uploader. To include an image, use the URL of an image you've already uploaded:

1

![Front view of the product](https://example.com/images/product.jpg)

If your public website uses a different Markdown renderer, check its output too: it may differ from the editor's preview.