javascript - 使用 CarrierWave 和 Rails 设置 Froala 所见即所得编辑器

Question

我一直在尝试让 Froala 完全使用我的 Rails 设置。我有一种类似博客的应用程序，其中包含与每个帖子相关联的帖子和图片。

class Post < ActiveRecord::Base
has_many :images
accepts_nested_attributes_for :images

class Image < ActiveRecord::Base
belongs_to :post
mount_uploader :image, ImageUploader

我正在尝试弄清楚如何让它与 Froala 一起工作。我可以在 Froala 配置中设置上传 URL，但我不知道它应该是什么。

<script>
  $(function() {
    $('.selector').froalaEditor({
      // Set the image upload URL.
      imageUploadURL: '????',

      imageUploadParams: {
        id: 'my_editor'
      }
    })
  });
</script>

我整天都在研究这个，并尝试了我能想到的一切。任何帮助将不胜感激。谢谢。

Answer 1

我使用载波和雾上传到 Amazon S3。这是它的样子，我将跳过雾部分，你可能需要做一些调整。然而，这个概念很简单。

我使用了 angularJS，但 jquery 选项应该如下所示。您需要使用 POST 方法定义上传路径

JavaScript:

<script>
    $(function() {
        $('.selector').froalaEditor({
            // Set the image upload URL.
            imageUploadURL: '/attachment/upload.json',
            imageUploadMethod: 'POST'
        })
    }
</script>

然后您将需要实现/attachment/upload.json。

在 rails 上

-- attachment.rb
class Attachment < ActiveRecord::Base
    mount_uploader :picture, PictureUploader
end

因为是ajax调用，提交的时候需要在controller中处理CSRF token verify。这个例子将跳过验证:所以添加 skip_before_filter :verify_authenticity_token 在你的 Controller 中。如果您不想跳过验证。您需要使用 imageUploadParams 在 Froala 初始化中传递参数:{'authenticity_token':您的 csrf token }。 因此，让我们回顾一下 rails 部分。

-- attachments_controller.rb
class AttachmentsController < ApplicationController
    skip_before_filter :verify_authenticity_token
  ...


    def upload
        # The Model: Attachment, created below.

        @attachment = Attachment.new
        @attachment.picture = params[:file]
        @attachment.save

        respond_to do |format|
            format.json { render :json => { status: 'OK', link: @attachment.picture.url}}
        end
    end
    ...

end

使用rails生成图片 uploader 并在控制台创建模型

rails generate uploader Picture
rails g model attachment picture:string
rake db:migrate

在你的 route.rb 中，设置到你的 Controller 的路由#method

post 'attachment/upload' => 'attachments#upload'

所以你将有一个通过 POST 的路由/attachment/upload，它调用 attachment#upload。希望能帮助到你!如果有什么让您感到困惑，请告诉我。