Flask项目集成富文本编辑器

UEditor简介

UEditor是是由百度「FEX前端研发团队」开发的所见即所得富文本web编辑器，具有轻量，可定制，注重用户体验等特点，开源基于MIT协议，允许自由使用和修改代码。
具体文档参见：http://fex-team.github.io/ueditor/

UEditor入门部署与体验

1.1下载UEditor

访问UEditor首页，下载1.4.3 PHP UFT-8版本的UEditor（最新版本为1.5.0），解压至Flask项目的static目录。解压后UEditor树状结构图如下图所示：

|  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

1.2创建demo文件

在解压后的目录创建demo.html,填入下面的html代码

 
         
         


 
         
 
         
         
         
         
         
         


  

1.3在浏览器中打开demo.html

如果在浏览器中卡到了下面的编辑器，那么恭喜你，初步部署UEditor成功？！

Flask实现后端请求

与后台通信的功能：

    1.上传图片
    2.粘贴、拖动上传图片
    3.上传视频
    4.图片管理
    5.图片转存远程图片

获取配置信息

在初始化编辑器时，首先向后端请求配置信息，后端接受到请求后，返回相应的配置信息。

请求参数：

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

文件、视频、图片上传

由于不同方式上传文件的功能的实现方法是一样的，这里只做一次讲解。上传的文件可用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 ('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[]') “获取。

思路：遍历远程图片列表，通过urllib将图片下载并进行保存。

请求参数：

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

返回格式：

// 需要支持callback参数,返回jsonp格式
// list项的state属性和最外面的state格式一致
{
     "state": "SUCCESS",
     "list": [{
         "url": "upload/1.jpg",
         "source": "http://b.com/2.jpg",
         "state": "SUCCESS" }
        ]
}

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

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