Download the PHP package makraz/ux-quill without Composer
On this page you can find all versions of the php package makraz/ux-quill. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download makraz/ux-quill
More information about makraz/ux-quill
Files in makraz/ux-quill
Package ux-quill
Short Description Symfony UX Bundle to integrate the Quill rich text editor into Symfony forms
License MIT
Homepage https://github.com/makraz/ux-quill
Informations about the package ux-quill
Quill Bundle for Symfony using Symfony UX
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
If you are using the AssetMapper component, install the Quill package:
Step 2: JavaScript dependencies (Webpack Encore only)
If you are using Webpack Encore (skip this step if using AssetMapper):
Or with npm:
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:
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:
Available Toolbar Formats
Inline formats:
| Format | Description |
|---|---|
'bold' |
Bold text |
'italic' |
Italic text |
'underline' |
Underlined text |
'strike' |
Strikethrough text |
['color' => []] |
Text color picker |
['background' => []] |
Background color picker |
['font' => []] |
Font family selector |
['size' => ['small', false, 'large', 'huge']] |
Font size selector |
'link' |
Hyperlink |
'code' |
Inline code |
Block formats:
| Format | Description |
|---|---|
['header' => 1] |
Heading level 1 button |
['header' => 2] |
Heading level 2 button |
['header' => [1, 2, 3, false]] |
Heading dropdown |
'blockquote' |
Blockquote |
'code-block' |
Code block |
['list' => 'ordered'] |
Ordered list |
['list' => 'bullet'] |
Bullet list |
['indent' => '-1'] |
Decrease indent |
['indent' => '+1'] |
Increase indent |
['align' => []] |
Text alignment dropdown |
['direction' => 'rtl'] |
Text direction (RTL) |
Embeds:
| Format | Description |
|---|---|
'image' |
Image embed |
'video' |
Video embed |
'formula' |
Formula (requires KaTeX) |
Utility:
| Format | Description |
|---|---|
'clean' |
Remove all formatting |
Toolbar Presets
Minimal toolbar:
Full toolbar:
Disable toolbar entirely:
Themes
Quill comes with two built-in themes:
Snow (default)
A traditional toolbar-based theme. The toolbar sits above the content area.
Bubble
A tooltip-based theme. The formatting toolbar appears as a floating bubble when text is selected.
Editor Options
Use the quill_options parameter to configure global editor behavior:
| Option | Type | Default | Description |
|---|---|---|---|
theme |
string |
'snow' |
Editor theme: 'snow' (toolbar) or 'bubble' (tooltip) |
placeholder |
string |
'Start writing...' |
Placeholder text shown in an empty editor |
readOnly |
bool |
false |
Set the editor to read-only mode |
toolbar |
array\|bool\|string |
(default toolbar) | Toolbar configuration — array of button groups, false to disable, or a CSS selector string for a custom toolbar element |
minHeight |
int\|string\|null |
null |
Minimum height of the editor — integer for pixels, string for CSS values (e.g. '20rem', '50vh') |
EasyAdmin Integration
The bundle provides a dedicated QuillAdminField for seamless EasyAdmin integration:
To customize the options, use setFormTypeOptions:
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:
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:
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:
| Event | Detail | Description |
|---|---|---|
quill:options |
QuillConfig |
Dispatched before initialization. Modify the config object to add modules or change settings. |
quill:connect |
Quill |
Dispatched when the editor is fully initialized and ready. |
quill:change |
{ html: string } |
Dispatched whenever the editor content changes. |
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
All versions of ux-quill with dependencies
symfony/stimulus-bundle Version ^2.9.1
symfony/twig-bundle Version ^6.4|^7.0|^8.0
symfony/form Version ^6.4|^7.0|^8.0