How exactly DO you integrate ckeditor with Paperclip so it can upload image files?

Question

How do you get http://github.com/galetahub/rails-ckeditor working so you can upload image files? I don't think I'll use the s3 storage...

any help would be appreciated.

Uneventful

Answer 1

Yes you can. I assume that you have paperclip already set up for S3. So you have only edit the picture.rb and attachement_file.rb in you model directory (app/model/ckeditor/) and replace these lines

  has_attached_file :data,
                    :url => "/ckeditor_assets/attachments/:id/:filename",
                    :path => ":rails_root/public/ckeditor_assets/attachments/:id/:filename"

with your papeclip version has_attached_file:

  has_attached_file :data, :styles => { :content => '575>', :thumb => '80x80#' },
    :storage => :s3, :s3_credentials => "#{Rails.root}/config/s3.yml", :path => ":attachment/:id/:style.:extension",
    :url => ":s3_domain_url"

That's it. Btw: this is example from Rails 3.

Shirl

This is a standard location by convention? app/model/ckeditor/? There I create which file and put these lines? – Infantryman

@Infantryman well, to be honest it should be in lib directory. But I used Ckeditor generator which create this path. – Shirl

Answer 2

I would follow the README for the rails-ckeditor plugin you mentioned. If you don't need the SWFUpload, you can simply integrate the CKEditor and Paperclip, by writing a custom file uploader and custom file browser, and connect them to the editor by specifying urls and callback functions.

It is always useful to have an example, the author has made an example app. Unfortunately, there are a few errors in it. Consider the following points to make it running

1. change the following lines in config/environment.rb

   config.gem 'paperclip', :version => '2.3.3'

   config.gem 'ckeditor', :version => '3.4.1'

2. delete the file index.html in public

3. add a root route to config/routes.rb

   map.root :controller => "pages"

Seditious

Answer 3

Rails 4.2.0 solution:

How do you get http://github.com/galetahub/rails-ckeditor working so you can upload image files?

As is, CKEditor allows you to embed existing image URLs, but for CKEditor and Paperclip to work together so you can upload images, you will need ImageMagick. As I understand, it handles uploading the image data, making an image URL reference for the uploaded image data and the embedding of the uploaded image data's URL.

---

CKEditor

Add gem "ckeditor" to your Gemfile

then run the $ bundle install command.

---

Add this to /app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require ckeditor/init  <--------------- THIS
//= require_tree . <----------------------- ABOVE THIS

---

per: https://github.com/galetahub/ckeditor#how-to-generate-models-to-store-uploaded-files

Add this to:

/config/routes.rb
I put it before the resources which utilize it

mount Ckeditor::Engine => '/ckeditor'  

---

Using "form_for" and having set up an "Article" model with a title:string and text:text /app/views/articles/_form.html.erb

  <p>
    <%= f.label :text %><br>
    <%= f.cktext_area :text, rows: 10  %> # <-------- "cktext_area"
  </p>

Using "simple_form_for"

  <div class="form-group">
    <%= f.input :body, :as => :ckeditor, input_html: {:ckeditor => {:toolbar => 'FULL'}}, class: "form-control" %>
  </div>

---

Paperclip

per: https://richonrails.com/articles/getting-started-with-ckeditor

Add gem "paperclip" to your Gemfile and $ bundle install.

Then run the following two commands:

$ rails generate ckeditor:install --orm=active_record --backend=paperclip

and

$ rake db:migrate

---

ImageMagick

For macOS Sierra:

$ brew install imagemagick

For other ImageMagick install options: https://www.imagemagick.org/script/install-source.php

Tapetum

Answer 4

Use following things it working for me but you should have account on Amazon for s3 storage and correct endpoint you can refer following

code.`gem 'aws-sdk', '~> 2'
gem 'aws-s3'
gem 'aws-sdk-v1'
gem 'paperclip'

class Ckeditor::Picture < Ckeditor::Asset

  AWS_CONFIG = YAML.load(ERB.new(File.read("#{Rails.root}/config/aws.yml")).result)[Rails.env]

  has_attached_file :data,
                    s3_credentials: {
                        access_key_id: AWS_CONFIG['access_key_id'],
                        secret_access_key: AWS_CONFIG['secret_access_key'],
                        bucket: AWS_CONFIG['bucket'],
                    },
                    s3_host_name: 's3.amazonaws.com',
                    :s3_endpoint => 's3.amazonaws.com',
                    storage: :s3,
                    s3_headers:     { "Cache-Control" => "max-age=31557600" },
                    s3_protocol:    "https",
                    bucket:         AWS_CONFIG['bucket'],
                    url: ':s3_domain_url',
                    path: '/:class/:attachment/:id_partition/:style/:filename',
                    default_url:   "/:class/:attachment/:id/:style/:basename.:extension",
                    default_style: "medium"

  validates_attachment_size :data, :less_than => 2.megabytes
  validates_attachment_presence :data

  def url_content
    url(:content)
  end
end

`

comment this line require "ckeditor/orm/active_record" from /config/initializers

finally put this line in <%= f.cktext_area :body %> view file.

Bygone

Answer 5

In addition to Zaparka's response, I had to remove #{Rails.root} as I was getting an unitialized constant error. SO instead I put "/config/s3.yml", and that worked.

Archimandrite