rails中实现kindeditor中的图片上传
?
FROM: ?http://blog.sina.com.cn/s/blog_767a3aa7010113k3.html
?
本人使用的rails版本:2.3.4, kindeditor版本： 3.5.2，paperclip版本: 2.3.11， activerecord版本：2.3.4kindeditor是个非常好用的html编辑器，要在rails中实现kindeditor中的图片上传功能，需做以下操作：
前提：安装了GEM包 paperclip
1、建一个model，我建了个空MODEL，存储图片文件列表
? ? ? ruby script/generate model image
2、把这个image的MODEL上添加图片属性
? ? ? ruby script/generate paperclip image data
? ? ? 然后 rake db:migrate
3、建立一个controller
? ? ?ruby script/generate controller images upload image_list
? ? ?里面含两个action，用来接收上传和获取列表
4、修改MODEL(image)，添加以下代码
? ? ? has_attached_file :data,
? ? ? ? ? ? ? ? ? ? ? ? :styles=>{:medium=>"500x500>",:thumb=>"100x100>"},
? ? ? ? ? ? ? ? ? ? ? ? :whiny => false
5、完成CONTROLLER(images)里的代码
? ?protect_from_forgery :except => :upload
? ?skip_before_filter :verify_authenticity_token
? ?def upload
? ? ? @image = Image.new(:data => params[:imgFile])
? ? ? if @image.save
? ? ? ? render :text => {"error" => 0, "url" => @image.data.url(:medium)}.to_json
? ? ? else
? ? ? ? render ?:text => {"error" => 1}
? ? ? end
? ? end
?
? def image_list
? ? @images = Image.find(:all)
? ? @json = []
? ? for image in @images
? ? ? temp = %Q{{ ?"filesize":#{image.data.size},
? ? ? ? ? ? ? ? ?"filename":"#{image.data_file_name}",
? ? ? ? ? ? ? ? ?"dir_path":"#{image.data.url(:thumb)}",
? ? ? ? ? ? ? ? ?"datetime":"#{image.created_at}"}}
? ? ? @json << temp
? ? end
? ? render :text => ("{"file_list":[" << @json.join(",") << "]}")
? end
6、修改kindeditor/plugins/image/image.html
? ? 找到var imageUploadJson，把路径修改为要上传的action路径/images/upload ??
7、修改kindeditor/plugins/file_manager/file_manager.js
? ?找到var fileManagerJson ，修改为 /images/image_list，这里是修改获取列表的action
? ?找到var fileurl和var iconurl，将其赋值都等于data.dir_path，这里的意思是直接用返回路径作为图片路径
? ?找到insertLink函数，这个函数的功能是把选到的图片路径填回到URL框里，由于我们要用中图(medium)，修改 KE.$('url', dialogDoc).value = url.replace("/thumb/","/medium/");
?
补充几点注意事项：
a、在config/environment.rb中添加 config.gem "paperclip"，否则在执行到upload中的@image = Image.new(:data => params[:imgFile])时会出错，错误信息为：模型Image中未定义方法"undefined method has_attached_file",从而导致前台总是报"服务器出现故障"的错误；
b、上传的图片在服务器上的保存路径如：public/system/datas/"id值"/original/xxx.jpg，而upload中回传给前台的url为render :text => {"error" => 0, "url" => @image.data.url(:medium)}.to_json，会导致前台因找不到图片路径而无法显示，因此需要将上述url修改为"url" => @image.data.url(:original)
c、前台界面的KE属性中可不配置imageUploadJson和fileManagerJson，因第6步和第7步已设置了默认值分别为/images/upload、/images/image_list
?
本人使用的rails版本:2.3.4, kindeditor版本： 3.5.2，paperclip版本: 2.3.11， activerecord版本：2.3.4
