README

Symfony UX Bundle implementing Quill — a modern WYSIWYG rich text editor that outputs clean HTML.

Also working out of the box with EasyAdmin.

If you need a lightweight rich text editor (with no complex configuration) in a Symfony project, this is what you need.

• Installation
• Basic Usage
• Toolbar Configuration
• Themes
• Editor Options
• EasyAdmin Integration
• Data Format
• JavaScript Events

Installation

Step 1: Require the bundle

composer require makraz/ux-quill

If you are using the AssetMapper component, install the Quill package:

php bin/console importmap:require quill

Step 2: JavaScript dependencies (Webpack Encore only)

If you are using Webpack Encore (skip this step if using AssetMapper):

yarn install --force && yarn watch

Or with npm:

npm install --force && npm run watch

That's it. You can now use QuillType in your Symfony forms.

Basic Usage

In a form, use QuillType. It works like a classic form type with additional options:

use Makraz\QuillBundle\Form\QuillType;

public function buildForm(FormBuilderInterface $builder, array $options): void
{
    $builder
        ->add('content', QuillType::class)
    ;
}

By default, the editor comes with a toolbar including headers, bold, italic, underline, strike, lists, blockquote, code block, link, image, and a clean button.

You can add as many Quill fields on a single page as you need, just like any normal form field.

Toolbar Configuration

The toolbar is configured as a nested array where each sub-array represents a button group:

$builder->add('content', QuillType::class, [
    'quill_options' => [
        'toolbar' => [
            [['header' => [1, 2, 3, false]]],
            ['bold', 'italic', 'underline', 'strike'],
            [['list' => 'ordered'], ['list' => 'bullet']],
            ['blockquote', 'code-block'],
            [['color' => []], ['background' => []]],
            [['align' => []]],
            ['link', 'image', 'video'],
            ['clean'],
        ],
    ],
]);

Available Toolbar Formats

Inline formats:

Block formats:

Embeds:

Utility:

Toolbar Presets

Minimal toolbar:

'toolbar' => [
    ['bold', 'italic', 'underline'],
    ['link'],
    ['clean'],
],

Full toolbar:

'toolbar' => [
    [['header' => [1, 2, 3, 4, 5, 6, false]]],
    ['bold', 'italic', 'underline', 'strike'],
    [['color' => []], ['background' => []]],
    [['list' => 'ordered'], ['list' => 'bullet']],
    [['indent' => '-1'], ['indent' => '+1']],
    [['align' => []]],
    ['blockquote', 'code-block'],
    ['link', 'image', 'video'],
    ['clean'],
],

Disable toolbar entirely:

'toolbar' => false,

Themes

Quill comes with two built-in themes:

Snow (default)

A traditional toolbar-based theme. The toolbar sits above the content area.

$builder->add('content', QuillType::class, [
    'quill_options' => [
        'theme' => 'snow',
    ],
]);

Bubble

A tooltip-based theme. The formatting toolbar appears as a floating bubble when text is selected.

$builder->add('content', QuillType::class, [
    'quill_options' => [
        'theme' => 'bubble',
    ],
]);

Editor Options

Use the quill_options parameter to configure global editor behavior:

$builder->add('content', QuillType::class, [
    'quill_options' => [
        'theme' => 'snow',
        'placeholder' => 'Start writing your article...',
        'readOnly' => false,
        'minHeight' => 300,
        'toolbar' => [
            [['header' => [1, 2, 3, false]]],
            ['bold', 'italic', 'underline'],
            [['list' => 'ordered'], ['list' => 'bullet']],
            ['link', 'image'],
            ['clean'],
        ],
    ],
]);

EasyAdmin Integration

The bundle provides a dedicated QuillAdminField for seamless EasyAdmin integration:

use Makraz\QuillBundle\Form\QuillAdminField;

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

To customize the options, use setFormTypeOptions:

yield QuillAdminField::new('content')
    ->setFormTypeOptions([
        'quill_options' => [
            'theme' => 'snow',
            'placeholder' => 'Write your content here...',
            'minHeight' => 400,
            'toolbar' => [
                [['header' => [1, 2, 3, false]]],
                ['bold', 'italic', 'underline', 'strike'],
                [['list' => 'ordered'], ['list' => 'bullet']],
                ['blockquote', 'code-block'],
                ['link', 'image'],
                ['clean'],
            ],
        ],
    ])
;

The field automatically registers the Twig form theme and works with both AssetMapper and Webpack Encore.

Data Format

Quill outputs HTML. The value stored in your entity will be an HTML string:

<h2>Hello World</h2>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em> text.</p>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

When the editor is empty, the stored value is an empty string (the Stimulus controller normalizes Quill's default <p><br></p> to '').

Rendering in Twig

To display Quill content in your templates, render the HTML directly:

{{ myEntity.content|raw }}

Since Quill outputs standard HTML, no parsing or conversion is needed.

JavaScript Events

The Stimulus controller dispatches events you can listen to for custom behavior:

// Fired before the editor initializes — modify config here
document.addEventListener('quill:options', (event) => {
    const config = event.detail;
    // Add custom modules, modify toolbar, etc.
    config.modules.history = { maxStack: 100 };
});

// Fired when the editor is ready
document.addEventListener('quill:connect', (event) => {
    const quillInstance = event.detail;
    console.log('Quill is ready!', quillInstance);
});

// Fired on every content change
document.addEventListener('quill:change', (event) => {
    const { html } = event.detail;
    console.log('Content changed:', html);
});

Symfony Live Component Compatibility

The editor is wrapped in a data-live-ignore container, so it works correctly with Symfony Live Components without being destroyed on re-render.

Requirements

• PHP >= 8.1
• Symfony 6.4, 7.x, or 8.x
• symfony/stimulus-bundle >= 2.9.1

License

MIT