RubyOnRails在redactor中通过paperclip实现图片上传并编辑的功能

最新推荐文章于 2019-04-26 17:18:30 发布

y_xiao_

最新推荐文章于 2019-04-26 17:18:30 发布

阅读量1.4k

点赞数 1

分类专栏： rails 文章标签： rails

本文链接：https://blog.csdn.net/y_xiao_/article/details/45399447

版权

rails 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先谈一下对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'

这样，就实现了一个在线图片上传并编辑的功能。

y_xiao_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
RubyOnRails在redactor中通过paperclip实现图片上传并编辑的功能

首先谈一下对redactor和paperclip的一点浅显的理解吧： redactor：http://imperavi.com/redactor/ 、https://github.com/SammyLin/redactor-rails 是一款很方便的html在线文档编辑器，设置了很多button来方便类似于FAQ的文章的在线编辑，当然有一些功能是不完善的，比如上传编辑图片的功能，我们在这里就要
复制链接

扫一扫