Cannot pass Quill.js editor content through Symfony 5 Form

Question

I have a simple form with title and content field, however, the content from the Quill editor is not being sent through the form so I used their form-submit example(https://quilljs.com/playground/#form-submit). I'm trying to get the content via $request->request->get() in my Controller but when I dump it, it's null. Here is my code:

FormType:

class MenuType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder
            ->add('title', TextType::class, [
                'label' => 'Title',
            ])
            ->add('content', TextareaType::class, [
                'label' => false,
                'attr' => [
                    'class' => 'editor'
                ]
            ]);
    }

    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults([
            'data_class' => Menu::class,
        ]);
    }
}

Form rendering in twig:

{% extends 'admin/shared/layout.html.twig' %}

{% block body %}
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
                <h1 class="page-header">{% if item.id %}Edit{% else %}Add{% endif %} menu</h1>
            </div>
            {{ form_start(form) }}

            {{ form_row(form.title) }}

            <label>Content</label>
            <input name="about" type="hidden">
            <div id="editor">
                {{ form_row(form.content) }}
            </div>

            <br>
            <button class="btn btn-success" type="submit"><i class="fa fa-save"></i> Save</button>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('admin/quill/quill.min.js') }}"></script>
    <script>    
        var editor = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: toolbarOptions
            },
        });
        var form = document.querySelector('form');
        form.onsubmit = function() {
            // Populate hidden form on submit
            var about = document.querySelector('input[name=about]');
            about.value = JSON.stringify(editor.getContents());
        };
    </script>
{% endblock %}

Answer 1

Not the most beautiful solution, but it works - found it in another similar question about Django (QuillJS doesn't work with textarea)

    $('.editor').each(function(i, el) {
        var el = $(this), id = 'quilleditor-' + i, val = el.val(), editor_height = 200;
        var div = $('<div/>').attr('id', id).css('height', editor_height + 'px').html(val);
        el.addClass('d-none');
        el.parent().append(div);

        var quill = new Quill('#' + id, {
            modules: { toolbar: toolbarOptions },
            theme: 'snow'
        });
        quill.on('text-change', function() {
            el.val(quill.root.innerHTML);
        });
     })