Estoy tratando de implementar la solicitud de publicación con htmx y para el editor de texto enriquecido usando tinymce.
mi formulario:
<!--<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>El error que obtengo:
<ul class="errorlist"><li>reply<ul class="errorlist"><li>This field is required.</li></ul></li></ul>funciona bien cuando utilicé la solicitud de publicación tradicional con TinyMCE.
cuando usé htmx sin TinyMCE, también funcionó bien.
justo cuando combino htmx y TinyMCE me sale el error.
mi inicio tinymce:
tinymce.init({ selector: 'textarea', body_id : "reply", height: 200, plugins: 'a11ychecker advcode casechange export formatpainter linkchecker autolink lists checklist media mediaembed pageembed permanentpen powerpaste table advtable tinycomments tinymcespellchecker image code', toolbar: 'a11ycheck addcomment showcomments casechange checklist code export formatpainter pageembed permanentpen table image', toolbar_mode: 'floating', tinycomments_mode: 'embedded', tinycomments_author: 'Author name', });Esto es lo que resolvió este problema en particular para mí.
En este caso, el método tinyMCE.triggerSave() no se activaba cuando se activa el evento HTMX. Entonces, lo que debe hacer es llamar al método durante uno de sus eventos de solicitud previa de HTMX. En este caso, utilicé el evento htmx:configRequest, sin embargo, puede haber mejores eventos HTMX para usar.
Ejemplo:
document.body.addEventListener('htmx:configRequest', (event) => { // trigger the rich text editor save method tinyMCE.triggerSave(); // update the parameter in request richContent = document.querySelector('#{{ your form field id}}'); event.detail.parameters['{{ your form field name }}'] = richContent.value; })Debido a la forma en que se activan los eventos HTMX, los valores del formulario ya se han recopilado una vez que se activa el evento htmx:configRequest, por lo que debe actualizar el valor de los campos en la solicitud. Tal vez haya algunas formas mejores de hacer esto, pero esto está funcionando para mí.