1

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

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

  1. 上传按钮，允许上传 pdf 文件和
  2. 带有 froala 的文本字段，可以在其中上传图像

主动存储

class Article < ApplicationRecord
  belongs_to :author
  has_one_attached :image

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

弗拉拉：

# 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 中？

4

1 回答 1

0

从我发现尝试将 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 会将 data 属性放入元素中，以便您在需要通过侦听 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，它会自动使用它来存储图像。仍在研究撤消/重做和未提交的带有图像的表单的解决方案。

于 2021-05-24T12:18:51.763 回答