Ruby on rails 如何将文件从froala编辑器上载到rails活动存储

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

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

上载按钮，允许上载pdf文件和

带有froala的文本字段，可在其中上载图像

主动存储

class Article < ApplicationRecord
  belongs_to :author
  has_one_attached :image

Froala:

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

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")%>    
});

#类Adm:：ArticleController

并使用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”{
归因：假，
身高：330，
钥匙：“我的钥匙”，
iframeStyleFiles:['my.css']，
可插拔：['image']，
imageUploadToS3:，
保存URL:“”，
保存方法：“POST”
});

我想做如下事情：

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

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")%>    
});

var editor=new FroalaEditor（“#article_contenu”{
归因：假，
身高：330，
钥匙：“我的钥匙”，
iframeStyleFiles:['my.css']，
可插拔：['image']，
//imageUploadToS3:，
saveURL:'
});

---

是否有一种方法可以使用Rails Active Storage在froala编辑器中上载文件，类似于Rails ActionText，其中在trix编辑器中上载的图像存储在Active Storage中？

根据我发现的尝试将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来清除它时可以引用它。已删除事件：

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

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

编辑5/25/21

---

因此，我最终为弗罗拉的图片创建了一个新模型，并将其附在了“一”上。在控制器中，我在新模型的表中创建了一条记录，并将图像附在该记录上。我在新模型中添加了一个slug列，并在上传图像后将slug返回给froala。由于slug包含在元素中，所以我将其发送给控制器，以查找并删除从编辑器中删除图像时附加到的记录。Rails然后处理清除记录的操作。由于ActiveStorage已经用S3设置好了，所以它会自动使用它来存储图像。仍在为撤消/重做和未提交的带有图像的表单开发解决方案。

根据我发现的尝试将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来清除它时可以引用它。已删除事件：

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

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

编辑5/25/21

---

因此，我最终为弗罗拉的图片创建了一个新模型，并将其附在了“一”上。在控制器中，我在新模型的表中创建了一条记录，并将图像附在该记录上。我在新模型中添加了一个slug列，并在上传图像后将slug返回给froala。由于slug包含在元素中，所以我将其发送给控制器，以查找并删除从编辑器中删除图像时附加到的记录。Rails然后处理清除记录的操作。由于ActiveStorage已经用S3设置好了，所以它会自动使用它来存储图像。仍在为撤消/重做和未提交的带有图像的表单制定解决方案。

找到解决方案了吗？没有。对不起，你找到解决办法了吗？没有。很抱歉