原文地址:

http://52sox.com/write-a-flask-plugin-for-ueditor/

近期項(xiàng)目開(kāi)發(fā)中,隔壁那個(gè)搞python的哥們竟然笑著對(duì)我說(shuō),希望我能給他寫(xiě)1個(gè)百度編輯器的demo,方便他直接調(diào)用。
當(dāng)時(shí)真的受寵若驚,這哥們實(shí)力不在我之下,只能答應(yīng)它了。上網(wǎng)搜索下,有1篇文章Flask項(xiàng)目集成富文本編輯器UEditor實(shí)現(xiàn)圖片上傳功能已經(jīng)有1個(gè)現(xiàn)成的例子了。
這篇文章的作者,直接在視圖中定義對(duì)應(yīng)的操作,進(jìn)行一系列圖片上傳功能的。但是,這并沒(méi)有滿(mǎn)足我的要求,我想要的想過(guò)是直接導(dǎo)入一個(gè)模塊,然后它幫我做完一切的事情。比如這樣的形式:

from xxx import yyy

app = Flask(__name__)
yyy(app)

于是只好從頭開(kāi)始學(xué)習(xí)。
這里,我按照如下的方式從頭編寫(xiě)1個(gè)Flask版本的百度編輯器的插件:

百度文檔的解讀

后端實(shí)際代碼的編寫(xiě)

前端代碼的編寫(xiě)

下面我們開(kāi)始我們編寫(xiě)插件的過(guò)程。

在百度文檔中,已經(jīng)說(shuō)明UEditor提供4種后臺(tái)語(yǔ)言,分別為php,asp,asp.net和jsp。首先需要配置serverUrl參數(shù),當(dāng)ueditor初始化會(huì)向serverUrl中的URL發(fā)起對(duì)后端配置的請(qǐng)求。
而配置的優(yōu)先級(jí)如下:

后端獲取的配置項(xiàng) > 實(shí)例化傳入的配置項(xiàng) > ueditor.config.js文件的配置項(xiàng)

可以看到,后端獲取的配置項(xiàng)優(yōu)先級(jí)是最高的。在對(duì)后端配置請(qǐng)求的過(guò)程中,會(huì)對(duì)配置文件config.json中的設(shè)置進(jìn)行讀取。
而在請(qǐng)求的過(guò)程中,百度文檔統(tǒng)一請(qǐng)求格式說(shuō)明中已經(jīng)說(shuō)明,通過(guò)GET請(qǐng)求上的action參數(shù)來(lái)判斷是什么類(lèi)型的請(qǐng)求。后端根據(jù)不同的請(qǐng)求,進(jìn)行對(duì)應(yīng)的處理后,需要返回給定格式的內(nèi)容給前端Javascript。返回的結(jié)果一般為JSON的形式。

現(xiàn)在我們已經(jīng)對(duì)百度編輯器UEditor的文檔進(jìn)行了初步的解讀,下面我們開(kāi)始編寫(xiě)我們實(shí)際的代碼。
在這里,我們主要會(huì)用到config和uploadimage這2個(gè)配置,其他功能留給讀者自己去實(shí)現(xiàn)。

在編寫(xiě)代碼之前,我打算這樣來(lái)實(shí)現(xiàn)這個(gè)插件:

配置文件為1個(gè)python的模塊

有1個(gè)模塊用于處理對(duì)應(yīng)請(qǐng)求的操作

有1個(gè)模塊用于處理圖片上傳的操作,這里直接拿取之前Flask文檔作者中的上傳模塊

然后我們逐一進(jìn)行講解。

這里,我打算將百度默認(rèn)提供的配置寫(xiě)入到1個(gè)config的模塊中,本來(lái)打算使用類(lèi)似如下的方式:

imageAction = "uploadimage"
imageFieldName = "upfile"
...

由于時(shí)間比較緊,一時(shí)半會(huì)做不到Flask中讀取配置文件后為1個(gè)字典的形式,因此簡(jiǎn)化為該模塊直接返回1個(gè)字典,如下所示:

CONFIG = dict(imageActionName = "uploadimage", # 執(zhí)行上傳圖片的action名稱(chēng)
              imageFieldName = "upfile",       #提交的圖片表單名稱(chēng)
              imageMaxSize = 2048000,         #上傳大小限制,單位B
              imageAllowFiles = [".png", ".jpg", ".jpeg", ".gif", ".bmp"], #上傳圖片格式顯示
              imageCompressEnable = True,      #是否壓縮圖片,默認(rèn)是true
              imageCompressBorder = 1600,      #圖片壓縮最長(zhǎng)邊限制
              imageInsertAlign = "none",      #插入的圖片浮動(dòng)方式
              imageUrlPrefix = "",             #圖片訪問(wèn)路徑前綴
              imagePathFormat = "upload/{yyyy}/{mm}/{dd}/{time}{rand:6}"              
              )

我們將這段代碼定義為config模塊中,這樣,我們就完成了配置模塊的內(nèi)容了。

這里我們定義1個(gè)ueditor的模塊用于我們處理請(qǐng)求的操作。這里,我定義了1個(gè)UEditor的類(lèi)用于處理這個(gè)操作:

class UEditor(object):
    pass

首先我們要做的第一步是解決請(qǐng)求參數(shù)的問(wèn)題,讓不同的請(qǐng)求調(diào)用不同的處理函數(shù),我們將其定義在該類(lèi)的get_action函數(shù)中:

    def get_action(self):
        action = request.args.get("action")
        if action:
            return self.handle(action)

我們將具體處理的過(guò)程放在handle函數(shù)中,在這個(gè)函數(shù)中,我們要做2件事情:

根據(jù)不同的請(qǐng)求參數(shù)調(diào)用不同的函數(shù)

將不同函數(shù)返回的結(jié)果返回給調(diào)用者

然后是handle函數(shù)其具體的源碼:

    def handle(self, action):
        if action == "config":
            result = get_config()
        elif action == "uploadimage":
            result = upload_image()
        else:
            result = {"state": "未實(shí)現(xiàn)"}
        res = make_response(json.dumps(result))
        res.headers["Access-Control-Allow-Origin"] = "*"
        res.headers["Access-Control-Allow-Headers"] = "X-Requested-With,X_Requested_With"
        return res

可以看到,這部分的源碼和我們之前編寫(xiě)的并沒(méi)有什么不同。在action時(shí)我們應(yīng)該將配置文件中的內(nèi)容直接返回即可:

def get_config():
    return CONFIG

而在上傳圖片的時(shí)候,我們根據(jù)配置文件中的配置,將其傳遞給上傳文件的模塊,這里我們直接把之前Flask那篇文章作者git上的Uploader拿了過(guò)來(lái)。其實(shí)他也是參考php的實(shí)現(xiàn)的源碼,將其修改為python版本而言。

def upload_image():
    """上傳圖片"""
    fieldName = CONFIG.get("imageFieldName")
    conf = dict(pathFormat = CONFIG.get("imagePathFormat"),
                maxSize = CONFIG.get("imageMaxSize"),
                allowFiles = CONFIG.get("imageAllowFiles")
                )
    if request.files.get(fieldName):
        field = request.files[fieldName]
        uploader = Uploader(field, conf, "static")
        result = uploader.getFileInfo()
    else:
        result = {"state": "上傳接口出錯(cuò)"}
    return result

這里,在Uploader類(lèi)中第1個(gè)參數(shù)為類(lèi)文件對(duì)象,第2個(gè)參數(shù)為對(duì)應(yīng)的配置,第3個(gè)參數(shù)為圖片上傳的根目錄。最后,通過(guò)這個(gè)實(shí)例的getFileInfo方法得到后端上傳成功后返回的內(nèi)容。
這樣,我們就基本解決了后端圖片上傳的過(guò)程了。但是,前端的調(diào)用問(wèn)題我們完全還沒(méi)有涉及到,下面我們來(lái)說(shuō)說(shuō)前端的調(diào)用問(wèn)題。

關(guān)于前端調(diào)用的問(wèn)題,我個(gè)人的設(shè)想是在1個(gè)模板文件中我們引入百度UEditor對(duì)應(yīng)的Javascript文件,然后我們初始化對(duì)應(yīng)的對(duì)象后,設(shè)置serverUrl為我們給定的URL地址即可操作了。一般我們的代碼是這樣的:

之前我們后端代碼的過(guò)程只解決了圖片上傳的問(wèn)題,關(guān)于serverUrl關(guān)聯(lián)到對(duì)應(yīng)URL的問(wèn)題還一直沒(méi)有解決。
為了解決這個(gè)問(wèn)題,我打算引入藍(lán)圖和Flask提供的add_url_rule來(lái)解決這個(gè)問(wèn)題。

UE = Blueprint("ueditor", __name__, url_prefix= "/ueditor")

...

def init_app(self,app):
    self.app = app
    UE.add_url_rule("/upload/"
                   "uploads",
                   self.get_action, methods = ["POST", "GET", "OPTIONS"])
    self.app.register_blueprint(UE)

然后我們讓Flask應(yīng)用實(shí)例注冊(cè)這個(gè)藍(lán)圖,這樣當(dāng)我們服務(wù)器啟動(dòng)時(shí),就可以使用這個(gè)藍(lán)圖url地址了。

最后,我們總結(jié)下這個(gè)插件的使用方法,我們新建1個(gè)app模塊,其源碼類(lèi)似如下:

from flask import Flask, render_template
from ueditor import UEditor

app = Flask(__name__)
ue = UEditor(app)

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

在這里,我們引入我們之前編寫(xiě)的插件模塊,然后將其實(shí)例化操作。而在index.html文件中則為我們之前引入百度編輯器的內(nèi)容。
在這里index.html的內(nèi)容類(lèi)似如下:

    

    提交

這樣我們便完成了百度編輯器的1個(gè)插件的編寫(xiě)了。

參考文章:

http://fex-team.github.io/ueditor/#server-deploy
http://fex-team.github.io/ueditor/#server-config
http://fex-team.github.io/ueditor/#dev-request_specification