UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗(yàn)等特點(diǎn)，開源基于MIT協(xié)議，允許自由使用和修改代碼。

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

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

這里下載任意一個(gè)版本的都可以，因?yàn)槲覀冎恍枰殃P(guān)于ueEditor前端部分的抽取出來(lái)，至于后端服務(wù)器的，我們自己開發(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)容讀取并寫入到服務(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：文件名稱。

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

其中，start,是標(biāo)志從第幾張圖片開始，個(gè)人感覺意義不大。

size:默認(rèn)顯示多少個(gè)文件、圖片。

total:圖片、文件總數(shù)量。

list:以數(shù)組形式列出圖片、文件的相對(duì)地址。

這里，我實(shí)現(xiàn)了一個(gè)簡(jiǎn)單demo,可以實(shí)現(xiàn)文件、圖片、視頻的上傳及在線圖片、在線文件的功能。點(diǎn)擊這里下載代碼源碼。

目前支持功能： 

 基本文字、排版等功能 

圖片上傳、文件上傳、視頻上傳功能 

在線文件、在線圖片功能

未實(shí)現(xiàn)功能：

涂鴉功能

網(wǎng)絡(luò)圖片功能

功能已在CentOS下，部署到nginx下，實(shí)測(cè)，可用。

使用方法： -----

1. 下載這里的完整代碼，直接cd到根目錄，運(yùn)行

python manage.py runserver 1989

,可直接查看效果演示。

2. 在urls.py中將uEditor所在目錄配置成靜態(tài)文件路徑，本demo中為UE    

( r'^UE/(?P<path>.*)$','django.views.static.serve', { 'document_root':os.path.dirname(__file__).replace('//','/')+"/UE"}),

  3. 將demo中ueconfig.json文件拷貝到自己項(xiàng)目的根目錄中，并修改其中幾處關(guān)鍵位置：   

 將"imageUrlPrefix": "/upload/images/"修改為自己項(xiàng)目中圖片上傳后保存的位置，demo中是/upload/images/這個(gè)目錄     將"scrawlUrlPrefix": "/upload/images/", 修改為自己項(xiàng)目中涂鴉     "snapscreenUrlPrefix": "/upload/images/", 截圖保存位置     "catcherUrlPrefix": "/upload/images/", 網(wǎng)絡(luò)圖片保存位置     "videoUrlPrefix": "/upload/vedio/"   視頻文件保存地址     "fileUrlPrefix": "/upload/files/" 附件保存地址     "imageManagerUrlPrefix": "/upload/onlineimages/", 在線圖片所在位置，在線圖片實(shí)際就是服務(wù)器為用戶提供的可選圖片     "fileManagerUrlPrefix": "/upload/onlinefiles/"  在線附件所在位置，在線附件實(shí)際就是服務(wù)器為用戶提供的可選附件

  4. json文件修改后，要把上面設(shè)置的路徑設(shè)置為靜態(tài)資源目錄，例如demo中全部保存到/upload/的子目錄下，那么在urls.py中配置如下：

( r'^upload/(?P<path>.*)$', 'django.views.static.serve',{ 'document_root': (os.path.dirname(__file__)+"/upload").replace('//','/') }),

之后，確保子目錄是存在的，為了方便，程序里沒有自動(dòng)創(chuàng)建目錄的方法，需要手工創(chuàng)建，例如demo中創(chuàng)建了images、vedio、 files、onlinefiles、onlineimages幾個(gè)子目錄

5. 將demo中的controller.py文件拷貝到項(xiàng)目中任意位置，其實(shí)controller就是一個(gè)異步處理的視圖，拷貝完成后，在urls.py中配置相應(yīng)的路由，demo中放到了根目錄，所以配置如下：

url(r'ueEditorControler','ueEditor_django.controller.handler')

自己的項(xiàng)目中只需要將

ueEditor_django.controller.handler

改為

xxxx.controller.handler

即可

6. 配置工作最后一步，將”ueditor.config.js”文件的 

, serverUrl: URL + "/net/controller.ashx" 

修改為

 , serverUrl: "/ueEditorControler"

即上一步配置的url路由

至此，配置工作完成，剩下的就是到頁(yè)面上引用uEditor了，下面是一個(gè)簡(jiǎn)單的html頁(yè)面，可根據(jù)uEditor放置位置調(diào)整腳本 和樣式的引用路徑

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>    <link rel="stylesheet" type="text/CSS" href="/UE/third-party/SyntaxHighlighter/shCoreDefault.css"><script type="text/javascript" src="/UE/third-party/SyntaxHighlighter/shCore.js"></script><script type="text/Javascript" charset="utf-8" src="/UE/ueditor.config.js"></script><script type="text/javascript" charset="utf-8" src="/UE/ueditor.all.min.js"> </script><script type="text/javascript" charset="utf-8" src="/UE/lang/zh-cn/zh-cn.js"></script><script type="text/javascript">	var ue = UE.getEditor('editor');	SyntaxHighlighter.all();</script></head><body>    <script id="editor" type="text/plain" style="width:auto;height:500px;"></script>    <input type="button" onclick="" value="保存"/></body></html>

查看源代碼，請(qǐng)到這里