使用htmx与tinymce提交表单时出现errolist必填项错误如何解决

• Tinymce初始化后会隐藏原生的<textarea>元素，使用自定义的DOM结构承载编辑内容。原生表单提交时，Tinymce会默认监听submit事件自动将编辑器内容同步回原生<textarea>，但HTMX的表单数据收集逻辑执行时机早于原生submit事件的默认回调，导致HTMX提交表单时，原生<textarea>还未被填入内容，后端校验时就会返回reply字段必填的错误。
• 你表单上声明的onsubmit='copyContent()'如果没有正确实现Tinymce内容同步逻辑，也会导致同样的问题。

方案1：直接使用HTMX事件钩子（最简） #

给表单添加hx-on::before-request属性，在HTMX收集表单数据前手动触发Tinymce的内容同步逻辑，修改后的表单代码如下：

<form onsubmit='copyContent()' method="post" 
      hx-post="{% url 'forum:forum-detail' post.pk %}" 
      hx-swap="innerHTML" 
      hx-target="#comment-list"
      hx-on::before-request="tinymce.triggerSave()">
    <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>

方案2：补充copyContent函数逻辑 #

如果你需要复用copyContent函数，直接在函数内添加同步逻辑即可：

function copyContent() {
    // 同步所有Tinymce编辑器内容到对应的原生textarea
    tinymce.triggerSave();
}

方案3：全局配置（适合多页使用Tinymce的场景） #

如果全站多处使用Tinymce+HTMX的组合，可以直接添加全局事件监听，不用逐个修改表单：

document.addEventListener('htmx:beforeRequest', function() {
    if (window.tinymce) {
        tinymce.triggerSave();
    }
});

额外提示：你代码里<textarea>的class写了summernote，如果没有用到Summernote编辑器的话可以删除这个类，避免逻辑混淆。

内容的提问来源于stack exchange，提问作者Andi Fathul Mukminin