UEditor是由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協議，允許自由使用和修改代碼。
首先從ueEditor官網下載最新版本的包，目前官網上提供了asp、.NET、php、jsp版本的，django版本只有一個第三方個人開發的，但看上出配置起來稍微復雜一點。
這里不介紹uEditor的使用方法，也不過多解釋uEditor的配置方法，官網上都有詳細的文檔和API介紹，下載的Demo中也有常用的方法的示例代碼，這里主要介紹uEditor和django集成需要修改的地方。
這里下載任意一個版本的都可以，因為我們只需要把關于ueEditor前端部分的抽取出來，至于后端服務器的，我們自己開發實現。
其實，uEditord的絕大部分功能在django中都是可用的，只有上傳文件、圖片、視頻、在線圖片、在線文件這一部分和上傳有關系的部分不好用，因為這些功能需要后臺處理程序的支持才可以，所以，我們自己要做的，就是用python實現這部分的處理邏輯。
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<path>.*)$','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<path>.*)$', '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放置位置調整腳本 和樣式的引用路徑
<!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>
查看源代碼，請到這里
新聞熱點
疑難解答
