Trix 编辑器：如何知道附件上传何时完成？答案

【问题标题】：Trix editor: how to know when attachment upload finished?Trix 编辑器：如何知道附件上传何时完成？
【发布时间】：2020-04-01 14:49:04
【问题描述】：

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

【问题讨论】：

我也找不到结束事件。 ActiveStorage 'direct-uploads:end' 事件看起来很有希望，但 ActionText 并没有与 ActiveStorage 事件挂钩。我最终这样做了：const contentEmpty = !content || !content.length || content === '<div></div>'; 以防止在添加附件之前提交，尽管这只适用于第一个附件。我考虑过解析 blob id 的原始内容，但对我来说不值得。我敢打赌，他们会接受公关，为 ActionText 添加更多现成的事件。

标签： ruby-on-rails rails-activestorage trix actiontext

【解决方案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 的代码。

【讨论】：