在Flask項目中使用富文本編輯器UEditor

jopen 9年前發布 | 50K 次閱讀 UEditor HTML編輯器

本文介紹如何在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標簽加入下面幾行：

<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標簽加入：

<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）：

# -*- 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編輯器了，上圖：

flask-ueditor-demo

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"]
}

主要功能代碼：

@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"
}

主要功能代碼：

@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" }

主要功能代碼：

@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/

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1433491278791.html

UEditor HTML編輯器

在Flask項目中使用富文本編輯器UEditor

UEditor簡介

在Flask項目中加入UEditor

UEditor后端請求規范說明

Flask實現后端請求

獲取配置信息

文件、視頻、圖片上傳

涂鴉功能

遠程抓圖

完整DEMO

相關經驗

相關資訊

相關文檔

目錄