Django整合百度富文字編輯器uEditor攻略

首先從 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}

其中，start,是標誌從第幾張圖片開始，個人感覺意義不大。

size:預設顯示多少個檔案、圖片。

total:圖片、檔案總數量。

list:以數組形式列出圖片、檔案的相對位址。

這裡，我實現了一個簡單demo,可以實現檔案、圖片、視頻的上傳及線上圖片、線上檔案的功能。點擊 這裡 下載代碼源碼。

目前支援功能：

基本文字、排版等功能

圖片上傳、檔案上傳、視頻上傳功能

線上檔案、線上圖片功能

未實現功能：

塗鴉功能

網狀圖片功能

功能已在CentOS下，部署到nginx下，實測，可用。

使用方法： -----

1. 下載這裡的完整代碼，直接cd到根目錄，運行

python manage.py runserver 1989

,可直接查看效果示範。

2. 在urls.py中將uEditor所在目錄配置成靜態檔案路徑，本demo中為UE

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

3. 將demo中ueconfig.json檔案拷貝到自己項目的根目錄中，並修改其中幾處關鍵位置：

將"imageUrlPrefix": "/upload/images/"修改為自己項目中圖片上傳後儲存的位置，demo中是/upload/images/這個目錄

將"scrawlUrlPrefix": "/upload/images/", 修改為自己項目中塗鴉

"snapscreenUrlPrefix": "/upload/images/", 儲存位置

"catcherUrlPrefix": "/upload/images/", 網狀圖片儲存位置

"videoUrlPrefix": "/upload/vedio/" 視頻檔案儲存地址

"fileUrlPrefix": "/upload/files/" 附件儲存地址

"imageManagerUrlPrefix": "/upload/onlineimages/", 線上圖片所在位置，線上圖片實際就是伺服器為使用者提供的可選圖片

"fileManagerUrlPrefix": "/upload/onlinefiles/" 線上附件所在位置，線上附件實際就是伺服器為使用者提供的可選附件

4. json檔案修改後，要把上面設定的路徑設定為靜態資源目錄，例如demo中全部儲存到/upload/的子目錄下，那麼在urls.py中配置如下：

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

之後，確保子目錄是存在的，為了方便，程式裡沒有自動建立目錄的方法，需要手工建立，例如demo中建立了images、vedio、 files、onlinefiles、onlineimages幾個子目錄

5. 將demo中的controller.py檔案拷貝到項目中任意位置，其實controller就是一個非同步處理的視圖，拷貝完成後，在urls.py中配置相應的路由，demo中放到了根目錄，所以配置如下：

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

自己的項目中只需要將

ueEditor_django.controller.handler

改為

xxxx.controller.handler

即可

6. 配置工作最後一步，將”ueditor.config.js”檔案的

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

修改為

, serverUrl: "/ueEditorControler"

即上一步配置的url路由

至此，配置工作完成，剩下的就是到頁面上引用uEditor了，下面是一個簡單的html頁面，可根據uEditor置放位置調整指令碼 和樣式的引用路徑

