最近公司的項目開始要使用ueditor了,可是ueditor卻沒有提供rails的版本,所以須要本身去定製化ueditor來知足項目的需求。很少說了,先簡要說明下使用方法:git
ueditor目錄下:github
注意:須要將ueditor目錄放在工程/public/plugins/目錄下 json
1 ueditor根目錄下的ueditor.config.jsdom
和本來的ueditor同樣,在紅色部分處配置處理上傳文件的controller和action,此處我已經作了修改,因此這裏配置好以後,提交表單會直接上傳到這裏配置好的actionide
2 ueditor根目錄下的config.jsonui
注意,該文件和原始的ueditor config.json文件的配置方法是徹底同樣的,我這裏展現下個人一些配置編碼
只修改了imageActionName選項,這裏對應的名稱將在前面所配置的action裏面經過params[:ueditor_action]中取出(ueditor本來的是action,可是和rails衝突,因此我對其進行了修改)url
壓縮包根目錄下:spa
resource_controller.rbcode
該文件只用做示例,其應該根據使用者的需求對應相應的controller。
在controller中能夠須要這樣進行處理:
1 #encoding:utf-8 2 require 'json' 3 require 'tempfile' 4 require 'base64' 5 #用於上傳項目相關的資源 6 class ResourceController < ApplicationController 7 #ueditor的配置 9 def handle_file 10 #ueditor是經過在url中的傳入ueditor_action(本來爲action,可是因爲其與rails衝突,因此我將其改成了ueditor_action)字段來區分具體的操做的 11 return if params[:ueditor_action].blank? 12 cur_action = params[:ueditor_action] 13 14 #剛進入頁面時editor會進行config的訪問 15 if (cur_action == "config") 16 #打開config.json文件,將其返回,注意,我這裏是將config.json文件放在/public/plugins/ueditor/目錄下,能夠本身的需求,對這裏進行相應的更改 17 json = File.read("#{Rails.root.to_s}/public/plugins/ueditor/config.json") 18 #正則替換,使其成爲ueditor能夠識別的格式 19 json = json.gsub(/\/\*[\s\S]+?\*\//, "") 20 result = JSON.parse(json).to_s 21 result = result.gsub(/=>/,":") 22 #返回結果 23 render :text => result 24 #圖片上傳 25 elsif (cur_action == "upload_image") 26 upload_image_video 27 #視頻上傳 28 elsif (cur_action == "upload_video") 29 upload_image_video 30 #塗鴉上傳 31 elsif (cur_action == "upload_scrawl") 32 upload_scrawl 33 else 34 respond_result 35 end 36 end 37 38 39 private 40 #塗鴉文件的處理,ueditor使用base64編碼,而且爲png格式 41 def upload_scrawl 42 status = 'SUCCESS' 43 if params[:upfile].blank? 44 return 45 end 46 scrawl_base64 = params[:upfile] 47 tempfile = Tempfile.new("upload_scrawl.png") 48 tempfile.binmode 49 tempfile.write(Base64.decode64(scrawl_base64)) 50 tempfile.close 51 #開始保存文件 52 filename = get_random_string(10) + "_" + get_random_string(10) + "_" + get_random_string(10) + ".png" 53 54 #保存文件到項目指定的路徑,該方法未實現,須要本身去實現 55 save_file(tempfile,filename) 56 57 respond_result(filename,status) 58 end 59 60 61 #上傳圖片和視頻的處理 62 def upload_image_video 63 status = 'SUCCESS' 64 #對視頻文件或者圖片文件進行保存,須要本身實現 65 respond_result(filename,status) 66 end 67 68 69 #負責向客戶端返回數據 70 def respond_result(filename='', status='') 71 #該變量是根據ueditor自帶的demo寫的,不知道爲何,demo沒有也沒有傳這個字段 72 callback = params[:callback] 73 response_text = '' 74 #構造須要返回的數據,這個是ueditor已經約定好的,不能隨意對字段進行修改。也不能使用rails內置的render :json語句,由於這樣最後獲得的數據格式是沒法被ueditor解析的。 75 if filename.blank? 76 response_text = "{\"name\":\"\"," + 77 "\"originalName\":\"\"," + 78 "\"size\":\"\",\"state\":\"#{status}\",\"type\":\"\",\"url\":\"\"}" 79 else 80 response_text = "{\"name\":\"#{filename}\"," + 81 "\"originalName\":\"#{filename}\"," + 82 "\"size\":\"#{File.size(TalentUtils.get_upload_file(filename)).to_s}\",\"state\":\"#{status}\",\"type\":\"#{File.extname(filename)}\",\"url\":\"#{filename}\"}" 83 end 84 85 if callback.blank? 86 render :text => response_text 87 else 88 render :text => "<script>"+ callback +"(" + response_text + ")</script>" 89 end 90 end 91 92 93 #生成隨機的字符串 94 def get_random_string(num = 5) 95 #5是指生成字符串的個數,默認爲5 96 rand(36 ** num).to_s(36) 97 end 98 end
ueditor中改變的文件爲ueditor.all.js,在文件中搜索「李江濤」能夠快速定位到我所更改的地方,部分地方可能未標識:
個人郵箱:seancheer@163.com
工程地址:https://github.com/seancheer/ueditor_with_rails