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

Question

我有一个带有标题和内容字段的简单表单，但是，来自羽毛笔编辑器的内容没有通过该表单发送，因此我使用了他们的表单提交示例（https://quilljs.com/playground/#form-submit）。我试图通过控制器中的$ request-> request-> get（）获取内容，但是当我转储它时，它为null。这是我的代码：

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

树枝中的表单渲染：

{% 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

您正在表单中设置属性class。

->add('content', TextareaType::class, [
    'label' => false,
    'attr' => [
        'class' => 'editor'
    ]
]);

但是在渲染视图中，您正在调用id而不是类。

var editor = new Quill('#editor', // <---- here
    theme: 'snow',
    modules: {
        toolbar: toolbarOptions
    },
});