使用CarrierWave和Rails设置Froala WYSIWYG编辑器 [英] Setting up Froala WYSIWYG editor with CarrierWave and Rails

问题描述

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

I've been trying to get Froala fully working with my rails set up. I have a type of blog like application with posts and images associated with each post.

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

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

I我试图弄清楚如何使用Froala。我可以在Froala配置中设置上传网址，但我不知道它应该是什么。

I'm trying to figure out how to get this working with Froala. I can set the upload URL in the Froala config, but I have no idea what it should be.

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

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

我整天都在研究这个问题并尝试了我能想到的一切。任何帮助将非常感谢。谢谢。

I've been researching this all day and tried everything I could think of. Any help would be very much appreciated. Thank you.

推荐答案

我使用了carrierwave和fog上传到Amazon S3。这是它的样子，我会跳过雾部分，你可能需要做一些调整。但是，这个概念很简单。

I used the carrierwave and fog to upload to Amazon S3. Here is how it looks like,I'll skip the fog part and you may need to do some adjustments. However, the concept is easy.

我使用了angularJS，但是jquery选项看起来应该是这样的。您需要使用POST方法定义上传路线

I used angularJS, but the jquery options should look like this. You will need to define your upload route with POST method

javascript：

The javascript:

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

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

Then you will need to implement the /attachment/upload.json.

在Rails中

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

因为它是ajax调用，所以在提交时需要在控制器中处理CSRF令牌验证。此示例将跳过验证：所以在您的控制器中添加
skip_before_filter：verify_authenticity_token。如果您不想跳过验证。您需要使用imageUploadParams传递Froala初始化中的参数：{'authenticity_token'：您的csrf标记} 。
所以，让我们。就去在轨道部分

Because it is ajax calling, you will need to handle CSRF token verify in your controller when you submit. This example will skip the verfication: so add skip_before_filter :verify_authenticity_token in your controller. If you don't want to skip the verification. you will need to pass the parameter in the Froala initialization with imageUploadParams: {'authenticity_token': your csrf token}. So let's go over the rails part.

-- 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生成PictureUploader并在控制台中创建模型

Use rails generate a PictureUploader and create model in console

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

在您的route.rb中，设置路径到您的控制器＃method

In your route.rb, setup the route to your controller#method

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

因此您将通过POST获得路线/附件/上传，并且通话附件#upload。希望能帮助到你！如果有什么事让您感到困惑，请告诉我。

So you will have a route /attachment/upload through POST, and it call the attachment#upload. Hope it helps! Let me know if anything confuse you.

这篇关于使用CarrierWave和Rails设置Froala WYSIWYG编辑器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！