ruby-on-rails - Trix 编辑器：如何知道附件上传何时完成？

Question

使用 ActionText 时，f.rich_text_area呈现一个 Trix 编辑器。当我向编辑器添加附件时，它会自动开始直接上传。如果我在上传完成之前提交表格，显然文本中会缺少附件。我知道在上传开始之前刚刚添加trix-attachment-add附件时会触发该事件。我可以添加什么事件侦听器以便知道上传何时完成？

Answer 1

如果您使用的是 Stimulus.js，以下控制器将禁用提交按钮，直到所有附件都完成上传。

控制器：

// form-with-trix-controller.js
export default class extends Controller {
  static targets = ['submit']

  disableSubmitIfTrixAttachmentsUploading(/*event*/) {
    const { hasTrixAttachmentsUploading } = this
    this.submitTargets.forEach(submitTarget => submitTarget.disabled = hasTrixAttachmentsUploading)
  }

  get hasTrixAttachmentsUploading() {
    return this.trixAttachments.some(attachment => attachment.isPending())
  }

  get trixAttachments() {
    return this.trixElements.flatMap(trix => trix.editor.getDocument().getAttachments())
  }

  get trixElements() {
    return Array.from(this.element.querySelectorAll("trix-editor"))
  }
}

在包装 Trix 控制器的表单中：

<form data-controller="form-with-trix" data-action="trix-change->form#disableSubmitIfTrixAttachmentsUploading">  
  <input type="submit" name="commit" value="Save File" data-form-target="submit">
</form>

基于来自 Hey.com 的代码。