使用 htmx 和 tinymce 时出现错误列表

Posted 2023-05-07

【中文标题】使用 htmx 和 tinymce 时出现错误列表

【英文标题】：getting errolist when using htmx and tinymce

【发布时间】：2021-12-24 05:49:17

【问题描述】：

我正在尝试使用 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 中使用传统的 post 请求时，它工作得很好。

当我在没有 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',
   );

【问题讨论】：

copyContent() 函数有什么作用？您使用的是哪个 TinyMCE 版本？

@Dauros 我想我使用的是 tinymce 5。我的其他表单有一个可编辑的输入而不是 textarea，因为 django 表单在提交之前只识别 textarea 我将 innerhtml 从可编辑复制到 textarea。然后我尝试在这里使用相同的方法将textarea复制到tinymce生成的那个。或者我认为这是问题导致生成的 iframe 没有相同的名称，在这种情况下是“回复”。但似乎这不是导致问题的原因

您应该先尝试一下，不要手动复制字段。我尝试使用带有 django-tinymce 包的干净 Django 实例重现您的问题，但它开箱即用地运行良好。 iframe 中的 TinyMCE 自动将编辑器的内容与 textarea 同步，并且 HTMX 正在发送正确的表单数据。

我在使用 Django、HTMX 和 TincyMCE 时看到了类似的东西。似乎在使用 HTMX 表单事件时，Tiny 在表单提交上触发的任何事件都没有被触发。我的字段不是必需的，所以我没有看到该错误，但是调用 HTMX 表单触发事件时 没有得到更新。

【参考方案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 事件触发，表单值已经被收集，因此您需要更新请求中的字段值。也许有一些更好的方法可以做到这一点，但这对我有用。