Flask項目集成富文本編輯器UEditor

本文介紹如何在Flask項目中集成富文本編輯器UEditor，並實現文件上傳、圖片上傳、視頻上傳及塗鴉功能。

UEditor簡介

UEditor是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器，具備輕量，可定製，注重用戶體驗等特色，開源基於MIT協議，容許自由使用和修改代碼。

因爲1.4.2版本以後的版本與以前版本存在較大的差別，本文以1.4.3版本爲藍本。

具體文檔參見：http://fex-team.github.io/ueditor/

在Flask項目中加入UEditor

下載UEditor：

訪問UEditor首頁，下載1.4.3 PHP UTF-8版本的UEditor，並解壓到Flask應用程序的static目錄。解壓以後的目錄結構是這樣的：

| static/
| | ueditor/
| | |+dialogs/
| | |+lang/
| | |+php/
| | |+themes/
| | |+third-party/
| | |-config.json
| | |-index.html
| | |-ueditor.all.js
| | |-ueditor.all.min.js
| | |-ueditor.config.js
| | |-ueditor.parse.js
| | |-ueditor.parse.min.js

+表示目錄。

在項目中加入UEditor：

咱們在Flask應用程序的templates目錄新建一個index.html文件（可根據實際狀況選擇文件名，或者把代碼加入須要使用UEditor的文件）：

在head標籤加入下面幾行：

html<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script>
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/ueditor.all.min.js') }}"> </script>
<!--建議手動加在語言，避免在ie下有時由於加載語言失敗致使編輯器加載失敗-->
<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，好比你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
<script type="text/javascript" charset="utf-8" src="{{ url_for('static', filename='ueditor/lang/zh-cn/zh-cn.js') }}"></script>

在body標籤加入：

html<script id="editor" type="text/plain"></script>



<script type="text/javascript">
    //實例化編輯器
    //建議使用工廠方法getEditor建立和引用編輯器實例，若是在某個閉包下引用該編輯器，直接調用UE.getEditor('editor')就能拿到相關的實例
    var ue = UE.getEditor('editor', {
        serverUrl: "/upload/"
    });
</script>

請求路徑配置：

UEditor 1.4.2+ 起，推薦使用統一的請求路徑，在部署好前端代碼後，須要修改 ueditor.config.js 裏的 serverUrl 參數（或者初始化時指定，見上面的代碼），改爲 '/upload/' 。

UEditor初始化時，會向後端請求配置文件，後端收到請求後返回JSON格式的配置文件。具體實現參照後面的代碼。

詳細配置內容參見文檔。

建立Flask應用程序（app.py）：

python# -*- coding: utf-8 -*-
# filename: app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/upload/', methods=['GET', 'POST'])
def upload():
    pass

if __name__ == '__main__':
    app.run(debug=True)

應用程序運行以後，咱們訪問 http://localhost:5000/ 就能夠看到UEditor編輯器了，上圖：

UEditor後端請求規範說明

與後臺通訊的功能列表:

• 上傳圖片
• 拖放圖片上傳、粘貼板圖片上傳
• word文檔圖片轉存
• 截圖工具上傳
• 上傳塗鴉
• 上傳視頻
• 上傳附件
• 在線圖片管理
• 粘貼轉存遠程圖片

統一請求格式說明:

• 前端請求經過惟一的後臺文件 /upload/ 處理前端的請求
• /upload/經過GET上的action參數，判斷是什麼類型的請求
• 省去沒必要要的請求，去除塗鴉添加背景的請求，用前端FileReader讀取本地圖片代替
• 請求返回數據的格式，常規返回json字符串，數據包含state屬性（成功時返回'SUCCESS'，錯誤時返回錯誤信息）。
• 請求支持jsonp請求格式，當請求有經過GET方式傳callback的參數時，返回json數據先後加上括號，再在前面加上callback的值，格式相似這樣：
  cb({"key": "value"})

詳細說明：http://fex-team.github.io/ueditor/#dev-request_specification

Flask實現後端請求

獲取配置信息

因爲接口升級，編輯器初始化時，首先會向後端請求配置信息，後端收到請求後，返
回相應的配置信息便可。

請求參數:

GET {"action": "config"}
POST "upfile": File Data

返回格式:

// 須要支持callback參數,返回jsonp格式
{
    "imageUrl": "http://localhost/ueditor/php/controller.php?action=uploadimage",
    "imagePath": "/ueditor/php/",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"]
}

主要功能代碼：

python@app.route('/upload/', methods=['GET', 'POST'])
def upload():
    action = request.args.get('action')

    # 解析JSON格式的配置文件
    # 這裏使用PHP版本自帶的config.json文件
    with open(os.path.join(app.static_folder, 'ueditor', 'php',
                           'config.json')) as fp:
        try:
            # 刪除 `/**/` 之間的註釋
            CONFIG = json.loads(re.sub(r'\/\*.*\*\/', '', fp.read()))
        except:
            CONFIG = {}

    if action == 'config':
        # 初始化時，返回配置文件給客戶端
        result = CONFIG

    return json.dumps(result)

文件、視頻、圖片上傳

圖片上傳包括：本地圖片上傳、拖拽圖片上傳、粘貼板圖片上傳。

這些功能實現的方法是同樣的，因此放到一塊兒來說。上傳的文件可用request.files['upfile']獲取。

請求參數:

GET {"action": "uploadimage"}
POST "upfile": File Data

action說明：

• uploadimage 上傳圖片
• uploadvideo 上傳視頻文件
• uploadfile 上傳附件（文件）

返回格式:

{
    "state": "SUCCESS",
    "url": "upload/demo.jpg",
    "title": "demo.jpg",
    "original": "demo.jpg"
}

主要功能代碼：

python@app.route('/upload/', methods=['GET', 'POST'])
def upload():
    result = {}
    action = request.args.get('action')

    if action in ('uploadimage', 'uploadvideo', 'uploadfile'):
        upfile = request.files['upfile']  # 這個表單名稱以配置文件爲準
        # upfile 爲 FileStorage 對象
        # 這裏保存文件並返回相應的URL
        upfile.save(filename_to_save)
        result = {
            "state": "SUCCESS",
            "url": "upload/demo.jpg",
            "title": "demo.jpg",
            "original": "demo.jpg"
        }

    return json.dumps(result)

塗鴉功能

塗鴉功能上傳通過BASE64編碼的圖片（通常爲PNG格式），可用request.form['upfile']獲取，後端收到以後須要先解碼，再保存。

請求參數:

GET {"action": "uploadscrawl"}
POST "content": Base64 Data

返回格式:

{
    "state": "SUCCESS",
    "url": "upload/demo.jpg",
    "title": "demo.jpg",
    "original": "demo.jpg"
}

主要功能代碼：

python@app.route('/upload/', methods=['GET', 'POST'])
def upload():
    result = {}
    action = request.args.get('action')

    if action in ('uploadscrawl'):
        base64data = request.form['upfile']  # 這個表單名稱以配置文件爲準
        img = base64.b64decode(base64data)
        # 這裏保存文件並返回相應的URL
        with open(filename_to_save, 'wb') as fp:
            fp.write(img)
        result = {
            "state": "SUCCESS",
            "url": "upload/demo.jpg",
            "title": "demo.jpg",
            "original": "demo.jpg"
        }

    return json.dumps(result)

遠程抓圖

遠程抓圖主要是把站外的圖片保存到本地或者指定的圖片服務器。

當複製粘貼其餘網站的網頁的圖片時，會觸發遠程抓圖功能。

遠程圖片列表可經過request.form.getlist('source[]')獲取。這裏暫時不清楚是
什麼緣由，爲何request.form.getlist('source') 爲空。

核心思路：遍歷遠程圖片列表，經過urllib把圖片下載並保存，下載完成以後按照格
式返回結果。

請求參數:

GET {
    "action": "catchimage",
     "source": [
        "http://a.com/1.jpg",
        "http://a.com/2.jpg"
    ]
}

返回格式:

// 須要支持callback參數,返回jsonp格式
// list項的state屬性和最外面的state格式一致
{
    "state": "SUCCESS",
    "list": [{
        "url": "upload/1.jpg",
        "source": "http://b.com/2.jpg",
        "state": "SUCCESS"
    }, {
        "url": "upload/2.jpg",
        "source": "http://b.com/2.jpg",
        "state": "SUCCESS"
    }, ]
}

完整DEMO

Flask UEditor完整DEMO：https://coding.net/u/wtx358/p/flask-ueditor-demo/git

實現了圖片上傳、附件上傳、視頻上傳、塗鴉、遠程抓圖等功能。

---

原文：http://flask123.sinaapp.com/article/47/