为Flask编写1个百度编辑器的插件

2024年5月3日 245次阅读 来源: 我勒个去

原文地点:

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件事变:

  1. 依据差别的要求参数挪用差别的函数

  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地点即可操纵了。平常我们的代码是如许的:

<script type="text/javascript" charset="utf-8" src="static/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="static/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="static/lang/zh-cn/zh-cn.js"></script>

<div>
    <div id="editor" style="height:400px;"></div>
</div>

<script type="text/javascript">
    var ue = UE.getEditor('editor', {
        serverUrl: "xxxx/yyyyy"
    });
</script>

之前我们后端代码的历程只处理了图片上传的题目,关于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的内容相似以下:

<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/static/ueditor/lang/zh-cn/zh-cn.js"></script>

<div>
    <div id="editor" style="height:400px;"></div>
    <button id="submit">提交</button>
</div>
<script type="text/javascript">
    var ue = UE.getEditor('editor', {
        serverUrl: "/ueditor/upload/"
    });
</script>

如许我们便完成了百度编辑器的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

    原文作者：我勒个去
    原文地址: https://segmentfault.com/a/1190000005755062
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞