Làm thế nào chính xác bạn tích hợp ckeditor với Paperclip để nó có thể tải lên các tập tin hình ảnh?

Question

Làm thế nào để bạn nhận được http://github.com/galetahub/rails-ckeditor hoạt động để bạn có thể tải lên các tệp hình ảnh? Tôi không nghĩ rằng tôi sẽ sử dụng bộ nhớ s3 ...

bất kỳ trợ giúp nào sẽ được đánh giá cao.

Answer 1

Có thể. Tôi cho rằng bạn có kẹp giấy đã được thiết lập cho S3. Vì vậy, bạn chỉ chỉnh sửa picture.rb và attachement_file.rb trong bạn mô hình thư mục (ứng dụng/mô hình/ckeditor /) và thay thế những dòng

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

với phiên bản papeclip bạn 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" 

Đó là nó. Btw: đây là ví dụ từ Rails 3.

Answer 2

Tôi sẽ theo dõi README cho plugin rails-ckeditor bạn đã đề cập. Nếu bạn không cần SWFUpload, bạn có thể chỉ cần integrate the CKEditor and Paperclip, bằng cách viết trình tải lên tệp tùy chỉnh và trình duyệt tệp tùy chỉnh và kết nối chúng với trình chỉnh sửa bằng cách chỉ định url và chức năng gọi lại.

Luôn hữu ích khi có ví dụ, tác giả đã thực hiện example app. Thật không may, có một vài lỗi trong đó. Hãy xem xét những điểm sau đây để làm cho nó chạy

1. thay đổi những dòng sau trong config/environment.rb

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

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

2. xóa các tập tin index.html ở nơi công cộng

3. thêm một gốc tuyến đường đến config/routes.r b

   map.root :controller => "pages"

Answer 3

Ngoài phản ứng Zaparka, tôi đã phải gỡ bỏ # {} Rails.root như tôi đã nhận được một lỗi liên tục unitialized. SO thay vì tôi đặt "/config/s3.yml", và nó hoạt động.

Answer 4

Sử dụng sau điều nó làm việc cho tôi nhưng bạn nên có một tài khoản trên Amazon để lưu trữ s3 và chính xác thiết bị đầu cuối, bạn có thể tham khảo sau

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 dòng này require "ckeditor/orm/active_record" từ/config/initializers

cuối cùng đặt dòng này trong <%= f.cktext_area :body %> tệp xem.

Answer 5

Rails 4.2.0 Giải pháp:

Làm thế nào để bạn có được http://github.com/galetahub/rails-ckeditor làm việc, do đó bạn có thể tải lên tập tin hình ảnh?

Như vậy, CKEditor cho phép bạn nhúng URL hình ảnh hiện tại, nhưng để CKEditor và Paperclip làm việc cùng nhau để bạn có thể tải hình ảnh lên, bạn sẽ cần ImageMagick. Theo tôi hiểu, nó xử lý việc tải lên dữ liệu hình ảnh, tạo tham chiếu URL hình ảnh cho dữ liệu hình ảnh được tải lên và nhúng URL của dữ liệu hình ảnh được tải lên.

---

ckeditor

Thêm gem "ckeditor" để Gemfile bạn

sau đó chạy lệnh $ bundle install.

---

Thêm phần này vào /app/assets/javascripts/application.js

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

---

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

Thêm phần này vào:

/config/tuyến đường. rb
Tôi đặt nó trước resources sử dụng nó

mount Ckeditor::Engine => '/ckeditor' 

---

Sử dụng "form_for" và đã thiết lập một "Điều" mô hình với tiêu đề: string và văn bản: văn bản /app/views/articles/_form.html.erb

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

Sử dụng "simple_form_for"

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

---

Kẹp giấy

mỗi: https://richonrails.com/articles/getting-started-with-ckeditor

Thêm gem "paperclip" để Gemfile của bạn và $ bundle install.

Sau đó chạy hai lệnh sau:

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

và

$ rake db:migrate

---

ImageMagick

Đối với hệ điều hành MacOS Sierra:

$ brew install imagemagick 

Đối với ImageMagick cài đặt tùy chọn khác: https://www.imagemagick.org/script/install-source.php