Customizing the Froala WYSIWYG Editor with CarrierWave and Rails

Question

I tried to get Froala to work completely with my rails. I have a blog like an 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 am trying to figure out how to do this with Froala. I can set the URL to load into the Froala configuration, 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 spent all day doing this research and trying everything I could think of. Any help would be much appreciated. Thanks.

Answer 1

I used carrier wave and fog to load on Amazon S3. Here's what it looks like, I'll skip some of the fog, and you may need to make some adjustments. However, the concept is simple.

I used angularJS, but jquery parameters should look like this. You will need to determine the download route using the POST method.

javascript:

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

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

In Rails

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

Since this is an ajax call, you will need to process the CSRF token in your controller when sending. This example will skip verification: so add skip_before_filter: verify_authenticity_token in your controller. If you do not want to skip the check. you need to pass the parameter in Froala initialization using imageUploadParams: {'authenticity_token': your csrf token}. Therefore release part of the 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 

Using rails generates a PictureUploader and creates a model in the console

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

In your route.rb, configure the route using the # controller method

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

This way you will have a route / attachment / upload via POST, and it causes the application to load #. Hope it helps! Let me know if anything bothers you.

Answer 2

Oh well, believing that you are in the same trap with me in ruins and rails 4. I suggest you read the CarrierWave document correctly

Github carrierwave respo

Um, if you are looking for a more detailed example, I came up with this one. It's pretty good imo

Allow file downloads using CarrierWave

Happy coding