html编辑器 flask,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代码

ueditor demo

这里写你的初始化内容

var ue = UE.getEditor('container');

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

]

}