首先從 ueEditor官網 下載最新版本的包,目前官網上提供了ASP、.NET、PHP、JSP版本的,django版本只有一個第三方個人開發的,但看上出配置起來稍微復雜一點。
這里不介紹uEditor的使用方法,也不過多解釋uEditor的配置方法,官網上都有詳細的文檔和API介紹,下載的Demo中也有常用的方法的示例代碼,這里主要介紹uEditor和django集成需要修改的地方。
這里下載任意一個版本的都可以,因為我們只需要把關于ueEditor前端部分的抽取出來,至于后端服務器的,我們自己開發實現。
其實,uEditord的絕大部分功能在django中都是可用的,只有上傳文件、圖片、視頻、在線圖片、在線文件這一部分和上傳有關系的部分不好用,因為這些功能需要后臺處理程序的支持才可以,所以,我們自己要做的,就是用python實現這部分的處理邏輯。
uEditor與后臺交互的邏輯:
1.編輯器初始化時,異步請求后臺處理頁面,處理程序應該返回一套json格式的配置信息,請求地址攜帶的參數為action=config
2.點擊圖片上傳按鈕,異步請求后臺處理頁面,請求地址攜帶參數為action=uploadimage
3.點擊視頻上傳按鈕,異步請求后臺處理頁面,請求地址攜帶參數為action=uploadvideo
4.點擊附件上傳按鈕,異步請求后臺處理頁面,請求地址攜帶參數為action=uploadfile
5.點擊多圖上傳中的在線圖片選項卡,異步請求后臺處理頁面,請求地址攜帶參數為action=listimage
6.點擊附件上傳的在線文件選項卡,異步請求后臺處理頁面,請求地址攜帶參數為action=listfile
7.點擊涂鴉按鈕后,異步請求后臺處理頁面,請求地址攜帶參數為action=uploadscrawl
我們要實現的就是,根據每次請求的不同參數值,調用不同的方法進行處理,如下圖所示,controller根據參數值,調用對應的處理程序進行處理:
處理邏輯其實很簡單,就是將Request請求中的文件內容讀取并寫入到服務器上,然后構造特定的json返回值。
上傳文件、圖片、視頻時,json格式如下:
{ "url": "20140703491416521462.png", "state": "SUCCESS", "error": "null", "original": "20140703491416521462.png", "title": "20140703491416521462.png"}
其中,url是文件在服務器的相對地址,這個地址會和json配置信息中的”xxxUrlPrefix”的值拼在一起,顯示出來。
state是狀態信息,成功的返回信息固定為SUCCESS,異常情況可自己定義。
error:異常信息,正常的話,為null
original:內部文件名,一般和titile相同。
title:文件名稱。
在線文件、在線圖片,json格式如下:
{ "state": "SUCCESS", "list": [ { "url": "upload/image/20140627/6353948647502438222009315.png" }, { "url": "upload/image/20140627/6353948659383617789875352.png" }, { "url": "upload/image/20140701/6353980733328090063690725.png" }, { "url": "upload/image/20140701/6353980745691597223366891.png" }, { "url": "upload/image/20140701/6353980747586705613811538.png" }, { "url": "upload/image/20140701/6353980823509548151892908.png" } ], "start": 0, "size": 20, "total": 6}
新聞熱點
疑難解答