使用 htmx 和 tinymce 时获取错误列表

Question

我正在尝试使用 htmx 实现 post 请求，并使用 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>

当我将传统的 post 请求与 TinyMCE 一起使用时，它工作正常。

当我在没有 TinyMCE 的情况下使用 htmx 时，它的工作也很好。

当我结合 htmx 和 TinyMCE 时，我得到了错误。

我的 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',
   });

Answer 1

这是为我解决这个特殊问题的方法。

在这种情况下，当 HTMX 事件触发时，tinyMCE.triggerSave() 方法没有被触发。因此，您需要做的是在 HTMX 预请求事件之一期间调用该方法。在这种情况下，我使用了 htmx:configRequest 事件，但是可能有更好的 HTMX 事件可供使用。

示例：

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

由于 HTMX 事件触发的方式，一旦 htmx:configRequest 事件触发就已经收集了表单值，因此您需要更新请求中的字段值。也许有一些更好的方法可以做到这一点，但这对我有用。

使用 htmx 和 tinymce 时获取错误列表

getting errolist when using htmx and tinymce

javascript

python

django

tinymce

htmx