Quill Editor Bundle

A lightweight Symfony bundle that exposes the Quill.js rich text editor as a reusable form field.

Installation

composer require eductool/quill-editor-bundle

If you are not using Symfony Flex, register the bundle manually in config/bundles.php:

return [
    Eductool\QuillEditorBundle\QuillEditorBundle::class => ['all' => true],
];

Install the bundle assets so the helper script is available under public/:

php bin/console assets:install --symlink --relative

Configuration

The bundle works out of the box. You may customise the defaults in config/packages/quill_editor.yaml:

quill_editor:
    include_cdn: true
    cdn:
        version: '1.3.7'
        script: null # use bundled default when null
        stylesheets:
            snow: null
            bubble: null
    default_options:
        theme: snow
        placeholder: 'Compose an epic...'
        read_only: false
        height: 200
        auto_initialize: true
        modules:
            toolbar:
                - [bold, italic, underline, strike]
                - [blockquote, code-block]

• include_cdn: toggle automatic loading of Quill assets from jsDelivr. Set to false if you manage assets yourself.
• modules: merged with the bundle defaults, so you can tweak only the portions you need.
• auto_initialize: set to false to defer editor creation and initialise manually via JavaScript (window.QuillEditorBundle.initialize('field_id')).

Usage

The bundle automatically registers a Twig form theme. You can use the field type like any other Symfony field:

use Eductool\QuillEditorBundle\Form\QuillEditorType;
use Symfony\Component\Form\Extension\Core\Type\SubmitType;

$builder
    ->add('content', QuillEditorType::class, [
        'label' => 'Content',
        'placeholder' => 'Start writing...'
    ])
    ->add('save', SubmitType::class);

The submitted value is HTML. You may convert it to Delta format in your own code if required.

Manual Initialisation

When auto_initialize is disabled, call the helper to create the editor once your own scripts are ready:

window.QuillEditorBundle.initialize('form_field_id').then((instance) => {
    // instance is the Quill editor
});

You can also retrieve an existing instance:

const quill = window.QuillEditorBundle.getInstance('form_field_id');

Browser Support

The helper script relies on evergreen browser features (Promises, Map). For legacy support you should include appropriate polyfills before loading the field.

License

Released under the MIT License.