首先谈一下对redactor和paperclip的一点浅显的理解吧:
redactor:http://imperavi.com/redactor/ 、https://github.com/SammyLin/redactor-rails 是一款很方便的html在线文档编辑器,设置了很多button来方便类似于FAQ的文章的在线编辑,当然有一些功能是不完善的,比如上传编辑图片的功能,我们在这里就要实现这个功能。
paperclip:https://github.com/thoughtbot/paperclip rails应用最广泛的上传插件。
那么接下来我们从零开始:
0、首先新建一个rails网站,并且通过脚手架生成一个image模型、控制器和视图:
rails new uploadImage
//通过脚手架生成Image的MVC
rails g scaffold Image name:string
//迁移数据库
rake db:migrate
我们这里需要一个Image.name属性,你可以自行添加你需要的属性。
修改你的routes.rb文件:
UploadImage::Application.routes.draw do
resources :images
get '/' => 'images#index'
这么看来,一个很简易的rails网站就形成了。
1、接下来我们完成paperclip的上传部分:
首先确保安装了imagemagick:
brew install imagemagick
(1)在gemfile中添加相应的gem包:
gem "paperclip", "~> 4.2"
gem "gravatar_image_tag"
并且bundle install
来安装。
(2)为Image模型在数据库中添加paperclip的column:
rails g paperclip image avatar
之后再做一次迁移:rake db:migrate
。
这时候可以看见paperclip generator在Image表中创建了四个column:
“avatar_file_name”,“avatar_content_type”,“avatar_file_size”和“avatar_updated_at”。
(3)在image.rb中添加一行代码has_attached_file叫做avatar,并添加数据验证:
class Image < ActiveRecord::Base
has_attached_file :avatar
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
end
(4)修改images_controller.rb的private image_params方法,permit avatar属性:
def image_params
params.require(:image).permit(:name, :avatar)
end
(5)在app/views/images/new.html.erb中添加一个file field来上传图片:
<h1>New image</h1>
<% form_for(@image, :html => { :multipart => true }) do |f| %>
<%= f.error_messages %>
<p>
<%= f.label :name %><br>
<%= f.text_field :name %>
</p>
<p>
<%= f.label :avatar %><br>
<%= f.file_field :avatar %>
</p>
<p>
<%= f.submit 'Create' %>
</p>
<% end %>
<%= link_to 'Back', users_path %>
这时,可以通过网站上传你的图片了,default情况下,avatar会将图片保存在
public/system/:class/:attachment/:id_partition/:style/:filename
下。
(5)接下来我需要某个页面来显示我刚刚上传的图片,在app/views/images/show.html.erb中添加显示功能:
<p>
<b>Name:</b>
<%=h @image.name %>
</p>
<p>
<b>Avatar:</b>
<%= image_tag @image.avatar.url(:small) %>
</p>
<%= link_to 'Edit', edit_image_path(@image) %> |
<%= link_to 'Back', images_path %>
注意:在这里我将@image.avatar.url(:small)作为显示,这是因为我不想在show页面中将图片显示过大,为了完成这个设定,需要在image.rb中添加对avatar的设置:
class Image < ActiveRecord::Base
has_attached_file :avatar, :styles => {
:thumb => "75x75>",
:small => "150x150>"
}
validates_attachment_content_type :avatar, :content_type => /\Aimage\/.*\Z/
end
以上我们就完成了对paperclip插件功能的实现。
2、接下来导入redactor编辑器:
(1)首先在gemfile中添加gem 'redactor-rails'
并bundle install
来安装。
(2)在application.js中添加:
//= require redactor-rails
//= require redactor-rails/langs/zh_cn
在application.css中添加:
*= require redactor-rails
将app/views/layouts/application.html.erb改为:
<!DOCTYPE html>
<html>
<head>
<title>UploadImage</title>
<%= stylesheet_link_tag "application", media: "all" %>
<%= javascript_include_tag "application" %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
确保它识别上面的js和scss文件。
(3)初始化你的redactor编辑器,我在这里将new.html.erb前面设置的avatar按钮去掉并添加了redactor编辑器,你也可以在其他页面添加:
<p>
<%= f.label :name %><br>
<%= f.text_field :name %>
</p>
<p>
<%= f.text_area :body, class: :redactor, rows: 40, col: 120 %>
</p>
<p>
<%= f.submit 'Create' %>
</p>
(4)个性化你的redactor编辑器:这里你需要generate一个redactor的config文件
rails g redactor:config
生成的config文件保存在这里:app/assets/redactor-rails/config.js 。
这样看起来你的redactor编辑器就嵌入到你的网站中了!
3、接下来我们的需求是:在上传的基础上,通过redactor的image button来实现上传并在线编辑功能。
(1)在images_controller.rb中添加一行代码,来响应http和json请求:
class ImagesController < ApplicationController
before_action :set_image, only: [:show, :edit, :update, :destroy]
respond_to :html, :json
(2)在images_controller.rb中修改create action。
这里我们观察到create方法传递的params是”image”=>{“name”=>”xxx”,”avatar”=>xxx,而redactor传递的params是”file”=>xxx,所以修改Image.new时的参数:
@image = Image.new(name: params[:name], avatar: params[:file])
来将params[:file]对象交给avatar的引用。
去掉脚手架中生成json的部分,因为我们观察到redactor接受的json文件有两个参数:filelink和id,所以在保存成功后,生成如下json:
if @image.save
render json: {filelink: @image.avatar.url, id: @image.id}
(3)在routes.rb文件中添加:
post "/redactor_rails/pictures" => 'images#create'
get "/redactor_rails/pictures" => 'images#new'
这样,就实现了一个在线图片上传并编辑的功能。