原文地址:

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

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

from xxx import yyy

app = Flask(__name__)
yyy(app)

于是只好從頭開始學習。
這里,我按照如下的方式從頭編寫1個Flask版本的百度編輯器的插件:

百度文檔的解讀

后端實際代碼的編寫

前端代碼的編寫

下面我們開始我們編寫插件的過程。

在百度文檔中,已經說明UEditor提供4種后臺語言,分別為php,asp,asp.net和jsp。首先需要配置serverUrl參數,當ueditor初始化會向serverUrl中的URL發起對后端配置的請求。
而配置的優先級如下:

后端獲取的配置項 > 實例化傳入的配置項 > ueditor.config.js文件的配置項

可以看到,后端獲取的配置項優先級是最高的。在對后端配置請求的過程中,會對配置文件config.json中的設置進行讀取。
而在請求的過程中,百度文檔統一請求格式說明中已經說明,通過GET請求上的action參數來判斷是什么類型的請求。后端根據不同的請求,進行對應的處理后,需要返回給定格式的內容給前端Javascript。返回的結果一般為JSON的形式。

現在我們已經對百度編輯器UEditor的文檔進行了初步的解讀,下面我們開始編寫我們實際的代碼。
在這里,我們主要會用到config和uploadimage這2個配置,其他功能留給讀者自己去實現。

在編寫代碼之前,我打算這樣來實現這個插件:

配置文件為1個python的模塊

有1個模塊用于處理對應請求的操作

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

然后我們逐一進行講解。

這里,我打算將百度默認提供的配置寫入到1個config的模塊中,本來打算使用類似如下的方式:

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

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

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

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

這里我們定義1個ueditor的模塊用于我們處理請求的操作。這里,我定義了1個UEditor的類用于處理這個操作:

class UEditor(object):
    pass

首先我們要做的第一步是解決請求參數的問題,讓不同的請求調用不同的處理函數,我們將其定義在該類的get_action函數中:

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

我們將具體處理的過程放在handle函數中,在這個函數中,我們要做2件事情:

根據不同的請求參數調用不同的函數

將不同函數返回的結果返回給調用者

然后是handle函數其具體的源碼:

    def handle(self, action):
        if action == "config":
            result = get_config()
        elif action == "uploadimage":
            result = upload_image()
        else:
            result = {"state": "未實現"}
        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

可以看到,這部分的源碼和我們之前編寫的并沒有什么不同。在action時我們應該將配置文件中的內容直接返回即可:

def get_config():
    return CONFIG

而在上傳圖片的時候,我們根據配置文件中的配置,將其傳遞給上傳文件的模塊,這里我們直接把之前Flask那篇文章作者git上的Uploader拿了過來。其實他也是參考php的實現的源碼,將其修改為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": "上傳接口出錯"}
    return result

這里,在Uploader類中第1個參數為類文件對象,第2個參數為對應的配置,第3個參數為圖片上傳的根目錄。最后,通過這個實例的getFileInfo方法得到后端上傳成功后返回的內容。
這樣,我們就基本解決了后端圖片上傳的過程了。但是,前端的調用問題我們完全還沒有涉及到,下面我們來說說前端的調用問題。

關于前端調用的問題,我個人的設想是在1個模板文件中我們引入百度UEditor對應的Javascript文件,然后我們初始化對應的對象后,設置serverUrl為我們給定的URL地址即可操作了。一般我們的代碼是這樣的:

之前我們后端代碼的過程只解決了圖片上傳的問題,關于serverUrl關聯到對應URL的問題還一直沒有解決。
為了解決這個問題,我打算引入藍圖和Flask提供的add_url_rule來解決這個問題。

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應用實例注冊這個藍圖,這樣當我們服務器啟動時,就可以使用這個藍圖url地址了。

最后,我們總結下這個插件的使用方法,我們新建1個app模塊,其源碼類似如下:

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")

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

    

    提交

這樣我們便完成了百度編輯器的1個插件的編寫了。

參考文章:

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