Невозможно передать содержимое редактора Quill. js через форму Symfony 5. - PullRequest
Новая
       10

Невозможно передать содержимое редактора Quill. js через форму Symfony 5.

0 голосов
/ 12 марта 2020

У меня есть простая форма с полем заголовка и содержимого, однако содержимое из редактора Quill не отправляется через форму, поэтому я использовал их пример отправки формы (https://quilljs.com/playground/#form -submit ) , Я пытаюсь получить контент через $ request-> request-> get () в моем контроллере, но когда я его выкидываю, он становится пустым. Вот мой код:

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

1 Ответ

0 голосов
/ 13 марта 2020

Не самое красивое решение, но оно работает - нашел его в другом похожем вопросе о Django ( Quill JS не работает с 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);
        });
     })
...