Получение эролиста при использовании htmx и tinymce

Я пытаюсь реализовать запрос сообщения с htmx и для текстового редактора с использованием tinymce.

моя форма :

    <!--<form method="POST"> {% csrf_token %}-->
    <form onsubmit='copyContent()' method= "post" hx-post= "{% url 'forum:forum-detail' post.pk %}" hx-swap="innerHTML" hx-target = "#comment-list">
        <div class="modal-body">
            <div class="form-group">
                <label for="threadTitle">Your Answer</label>
                <textarea name="reply" class="form-control summernote" placeholder="Input your answer here"></textarea>
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-light" id="cancelForm">Cancel</button>
            <button type="submit" class="btn btn-primary" name="btn-post-question">Post</button>
        </div>
    </form>

Ошибка, которую я получаю :

<ul class="errorlist"><li>reply<ul class="errorlist"><li>This field is required.</li></ul></li></ul>

все работает нормально, когда я использовал традиционный запрос сообщения с TinyMCE. Когда я использовал htmx без TinyMCE, он тоже работал нормально. это просто когда я комбинирую htmx и TinyMCE.

Вот что решило эту конкретную проблему для меня.

В данном случае событие tinyMCE.triggerSave() не срабатывало при срабатывании события HTMX. Поэтому нужно вызвать событие во время одного из событий предварительного запроса HTMX. В данном случае я использовал htmx:configRequest event.

document.body.addEventListener('htmx:configRequest', (event) => {

    // trigger the rich text editor save method
    tinyMCE.triggerSave();

    // update the parameter in request
    richContent = document.querySelector('#{{ form.text.id_for_label }}');
    event.detail.parameters['{{ your form field name }}'] = richContent.value;
})

На этапе htmx:configRequest параметры формы уже были заполнены в объекте запроса HTMX, поэтому вам нужно обновить их в запросе. Возможно, есть лучшие способы сделать это, но для меня это работает.

Вернуться на верх