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

╄→尐↘猪︶ㄣ 提交于 2019-12-31 09:04:12

问题


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.


回答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.




回答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"




回答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




回答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.




回答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.



来源:https://stackoverflow.com/questions/3647905/how-exactly-do-you-integrate-ckeditor-with-paperclip-so-it-can-upload-image-file

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!