如何将文件从 froala 编辑器上传到 Rails 活动存储答案

【问题标题】：how to upload a file from froala editor to rails active storage如何将文件从 froala 编辑器上传到 Rails 活动存储
【发布时间】：2020-10-18 14:36:23
【问题描述】：

我有一个使用 ActiveStorage（图片附在文章中）和 froala 编辑器的 rails 6 应用程序。两者都上传到 S3。

但我目前使用的是 froala S3 上传和主动存储。在表格中，我有：

上传按钮，允许上传 pdf 文件和
可以上传图片的带有 froala 的文本字段

活动存储

class Article < ApplicationRecord
  belongs_to :author
  has_one_attached :image

#ArticleController
@article.image.attach(params[:image])

Froala：

# class Adm::ArticleController < ApplicationController
    def new 
        #....
        @aws_data = FroalaEditorSDK::S3.data_hash(Article.froalaoptions)
    end
end

并在javascript中初始化：

var editor = new FroalaEditor('#article_contenu',{
                              attribution: false,
                              height: 330,
                              key: "mykey",
                              iframeStyleFiles: ['my.css'],
                              pluginsEnabled: ['image'],
                              imageUploadToS3: <%= @aws_data.to_json.html_safe %>,
                              saveURL: '<%= adm_auteur_article_autosave_url %>',
                              saveMethod: 'POST'     
});

我想做类似的事情：

var editor = new FroalaEditor('#article_contenu',{
                              attribution: false,
                              height: 330,
                              key: "mykey",
                              iframeStyleFiles: ['my.css'],
                              pluginsEnabled: ['image'],
                              // imageUploadToS3: <%= @aws_data.to_json.html_safe %>,
                              saveURL: '<%= rails_blob_path(article.image, disposition: "attachment")%>    
});

有没有办法使用 Rails Active Storage 在 froala 编辑器中上传文件，类似于 Rails ActionText 将在 trix 编辑器中上传的图像存储在 ActiveStorage 中？

【问题讨论】：

您找到解决方案了吗？
不，我没有。对不起。

标签： ruby-on-rails rails-activestorage froala

【解决方案1】：

根据我发现尝试将 Froala 与 Rails 6 一起使用（如果可以的话，使用其他东西），在您的控制器中，您可以执行以下操作：

blob = ActiveStorage::Blob.create_after_upload!(
  io: params[:file].original_filename,
  filename: params[:file].original_filename,
  content_type: params[:file].content_type
)
render json: { link: url_for(blob), data: blob.id }.to_json

这将创建 Blob，并且 Froala 会将数据属性放入元素中，以便您在需要通过侦听 Froala image.removed 事件来清除它时引用它：

    events: {
      'image.removed': function ($img) {
        $.post('/your_delete_file_action', {
          blob_id: $img.attr('data')
        });
     }

但这有问题。这些 blob 不会附加到任何东西，因此您不能使用 unattached 方法清理 S3。如果用户上传了图像，但没有提交表单或使用撤消按钮撤消上传图像，这可能会成为问题。它仍将存储在 S3 上。此外，如果用户删除图像然后单击撤消，则在从 S3 中删除图像后，您将得到一个断开的链接。由于我必须将 Froala 用于项目，因此我仍在努力解决这部分问题。

21 年 5 月 25 日编辑 所以我最终为 froala 图像创建了一个新模型，并将其设置为 has_one_attached。在控制器中，我在该新模型的表中创建了一条记录，并附有图像。我在新模型中添加了一个 slug 列，并在上传图像后将 slug 退回给 froala。由于 slug 包含在元素中，我将其发送到控制器以查找并删除从编辑器中删除图像时附加到的记录。然后 Rails 处理清除记录。由于 ActiveStorage 已经与 S3 一起设置，它会自动使用它来存储图像。仍在研究撤消/重做和未提交的带有图像的表单的解决方案。

【讨论】：