Custom style for one field – turning a textarea into a rich text editor Quill with Symfony Forms and Twig

I have a form rendered with {{ form(form }} so a standard way of rendering using Form component from Symfony. Now, we want to add a Rich Text Editor (Quill in this case) and add a possibility to attach functionality to chosen textareas. The form now, renders nicely thanks to inbuilt layouts that twig already supports so that form elements are styled with different versions of Bootstrap for instance thanks to Form Themes. So in the end the form is going to look like that (Essay text – Quill enhanced).

First have a look at your Twig config:

config/packages/twig.yaml

twig:
    default_path: '%kernel.project_dir%/templates'
    debug: '%kernel.debug%'
    strict_variables: '%kernel.debug%'
    number_format:
        thousands_separator: ','
    form_themes: ['bootstrap_4_layout.html.twig']

You can add a default theme that’s compatible with your front framework like Bootstrap 4 (in the config above it’s already there)

form_themes: ['bootstrap_4_layout.html.twig']

Grap Quill from github – BSD licencesed rich text editor.

This paragraph from Symfony docs exaplains how to modify only one form element in twig, instead of using form_row or form_label, form_error and form_widget for every element of the form and editing the whole html for the form.

But most importantly read this article about new feature in Symfony 4.3 which makes it simpler to prepare a name of the twig block that you want to override.

See how essayText has block_prefix called essay_text and then…

the new definition of the twig block that we can add that will have this name essay_text_widget. Oh and we’re modifying only widget, not error and label part.

templates/form/fields.html.twig

{% block essay_text_widget %}
    <div class="form-group">

        <textarea data-quilljs
                  id="essay_essayText"
                  name="essay[essayText]"
                  required="required" rows="10"
                  class="form-control">

        </textarea>
    </div>
{% endblock %}

So now in the twig template where we’re rendering the form it still stays simple:

{% form_theme form 'form/fields.html.twig' %}

{{ form(form) }}

We’re updating the form theme with our new, customised definition that we put into form/fields.html.twig and then rendering the whole form with {{ form(form) }}

One piece of code to apply Quill to the textareas. Have a look inside. It’s short and simple.

https://github.com/tangien/quilljs-textarea

How to initialize Quill with modules, what are the modules?

https://quilljs.com/docs/modules/toolbar/