symfony - 无法通过 Symfony 5 表单传递 Quill.js 编辑器内容

Question

我有一个带有标题和内容字段的简单表单，但是，Quill 编辑器中的内容并未通过表单发送，因此我使用了他们的表单提交示例( https://quilljs.com/playground/#form-submit )。我试图通过 Controller 中的 $request->request->get() 获取内容，但是当我转储它时，它是空的。这是我的代码:

表单类型:

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,
        ]);
    }
}

在 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

不是最漂亮的解决方案，但它有效 - 在另一个关于 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);
        });
     })