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代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</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
