首先從 ueEditor官網(wǎng) 下載最新版本的包，目前官網(wǎng)上提供了ASP、.NET、PHP、JSP版本的，django版本只有一個(gè)第三方個(gè)人開(kāi)發(fā)的，但看上出配置起來(lái)稍微復(fù)雜一點(diǎn)。

這里不介紹uEditor的使用方法，也不過(guò)多解釋uEditor的配置方法，官網(wǎng)上都有詳細(xì)的文檔和API介紹，下載的Demo中也有常用的方法的示例代碼，這里主要介紹uEditor和django集成需要修改的地方。

這里下載任意一個(gè)版本的都可以，因?yàn)槲覀冎恍枰殃P(guān)于ueEditor前端部分的抽取出來(lái)，至于后端服務(wù)器的，我們自己開(kāi)發(fā)實(shí)現(xiàn)。

其實(shí)，uEditord的絕大部分功能在django中都是可用的，只有上傳文件、圖片、視頻、在線圖片、在線文件這一部分和上傳有關(guān)系的部分不好用，因?yàn)檫@些功能需要后臺(tái)處理程序的支持才可以，所以，我們自己要做的，就是用python實(shí)現(xiàn)這部分的處理邏輯。

uEditor與后臺(tái)交互的邏輯：

1.編輯器初始化時(shí)，異步請(qǐng)求后臺(tái)處理頁(yè)面，處理程序應(yīng)該返回一套json格式的配置信息，請(qǐng)求地址攜帶的參數(shù)為action=config

2.點(diǎn)擊圖片上傳按鈕，異步請(qǐng)求后臺(tái)處理頁(yè)面，請(qǐng)求地址攜帶參數(shù)為action=uploadimage

3.點(diǎn)擊視頻上傳按鈕，異步請(qǐng)求后臺(tái)處理頁(yè)面，請(qǐng)求地址攜帶參數(shù)為action=uploadvideo

4.點(diǎn)擊附件上傳按鈕，異步請(qǐng)求后臺(tái)處理頁(yè)面，請(qǐng)求地址攜帶參數(shù)為action=uploadfile

5.點(diǎn)擊多圖上傳中的在線圖片選項(xiàng)卡，異步請(qǐng)求后臺(tái)處理頁(yè)面，請(qǐng)求地址攜帶參數(shù)為action=listimage

6.點(diǎn)擊附件上傳的在線文件選項(xiàng)卡，異步請(qǐng)求后臺(tái)處理頁(yè)面，請(qǐng)求地址攜帶參數(shù)為action=listfile

7.點(diǎn)擊涂鴉按鈕后，異步請(qǐng)求后臺(tái)處理頁(yè)面，請(qǐng)求地址攜帶參數(shù)為action=uploadscrawl

我們要實(shí)現(xiàn)的就是，根據(jù)每次請(qǐng)求的不同參數(shù)值，調(diào)用不同的方法進(jìn)行處理，如下圖所示，controller根據(jù)參數(shù)值，調(diào)用對(duì)應(yīng)的處理程序進(jìn)行處理：

處理邏輯其實(shí)很簡(jiǎn)單，就是將Request請(qǐng)求中的文件內(nèi)容讀取并寫(xiě)入到服務(wù)器上，然后構(gòu)造特定的json返回值。

上傳文件、圖片、視頻時(shí)，json格式如下：

{ "url": "20140703491416521462.png",  "state": "SUCCESS",  "error": "null",  "original": "20140703491416521462.png",  "title": "20140703491416521462.png"}

其中，url是文件在服務(wù)器的相對(duì)地址，這個(gè)地址會(huì)和json配置信息中的”xxxUrlPrefix”的值拼在一起，顯示出來(lái)。

state是狀態(tài)信息，成功的返回信息固定為SUCCESS，異常情況可自己定義。

error:異常信息，正常的話，為null

original:內(nèi)部文件名，一般和titile相同。

title：文件名稱(chēng)。

在線文件、在線圖片，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}