你如何将ckeditor与Paperclip集成以便它可以上传图像文件?

时间:2010-09-05 21:35:48

标签: ruby-on-rails plugins ckeditor paperclip

如何让http://github.com/galetahub/rails-ckeditor工作以便上传图片文件?我不认为我会使用s3存储......

任何帮助将不胜感激。

5 个答案:

答案 0 :(得分:7)

是的,你可以。我假设您已经为S3设置了回形针。所以你只需在你的模型目录(app / model / ckeditor /)中编辑picture.rb和attachement_file.rb并替换这些行

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

使用您的papeclip版本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"

就是这样。顺便说一句:这是Rails 3的例子。

答案 1 :(得分:2)

我会关注你提到的rails-ckeditor插件的README。如果您不需要SWFUpload,可以通过编写自定义文件上传器和自定义文件浏览器来integrate the CKEditor and Paperclip,并通过指定URL和回调函数将它们连接到编辑器。

有一个例子总是很有用,作者已经制作了example app。不幸的是,它有一些错误。请考虑以下几点使其运行

  1. 更改config/environment.rb

    中的以下行

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

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

  2. 在公共

  3. 中删除文件index.html
  4. 为config / routes.rb添加根路由

    map.root :controller => "pages"

答案 2 :(得分:2)

Rails 4.2.0解决方案:

  

如何使http://github.com/galetahub/rails-ckeditor正常工作,以便上传图片文件?

原样,CKEditor允许您嵌入现有的图像URL,但是对于CKEditor和Paperclip一起工作以便您可以上传图像,您将需要ImageMagick。据我了解,它处理上传图像数据,为上传的图像数据制作图像URL参考,以及嵌入上传的图像数据的URL。

CKEditor的

gem "ckeditor"添加到您的Gemfile

然后运行$ bundle install命令。

将此添加到/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

将此添加到:

/config/routes.rb
我把它放在利用它的resources之前

mount Ckeditor::Engine => '/ckeditor'  

使用“form_for”并设置带有标题的“文章”模型:字符串和文字:文字 /app/views/articles/_form.html.erb

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

使用“simple_form_for

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

回形针

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

gem "paperclip"添加到您的Gemfile和$ bundle install

然后运行以下两个命令:

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

$ rake db:migrate

的ImageMagick

对于macOS Sierra:

$ brew install imagemagick

对于其他ImageMagick安装选项:https://www.imagemagick.org/script/install-source.php

答案 3 :(得分:1)

使用以下对我有用的东西,但您应该在亚马逊上拥有s3存储帐户以及您可以参考的正确端点

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

`

在/ config / initializers

中评论此行require "ckeditor/orm/active_record"

最后将此行放在<%= f.cktext_area :body %>视图文件中。

答案 4 :(得分:0)

除了Zaparka的回复,我不得不删除#{Rails.root},因为我得到了一个整体常量错误。所以我放了“/config/s3.yml”,这很有效。