ueditor之ruby on rails 版

  最近公司的項目開始要使用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

相關文章
相關標籤/搜索