相关链接

UEditor:http://ueditor.baidu.com/website/​

下载地址:http://ueditor.baidu.com/website/download.html#ueditor​

文档:http://fex.baidu.com/ueditor/​

UEditor没有Python版本,所以这里下载一个最新php版本的utf-8包

解压软件包,把php目录里面的config.json复制出来,然后删除php目录(因为我们是Python)

在flask项目static目录下创建目录ueditor,把以上图中的目录文件拷贝到static/ueditor中

flask配置

编辑配置文件config.py,添加如下配置

#上传到本地
UEDITOR_UPLOAD_PATH = os.path.join(os.path.dirname(__file__),'images') #上传到七牛
UEDITOR_UPLOAD_TO_QINIU = True #如果上传到七牛这里设置为True,上传到本地则为False
UEDITOR_QINIU_ACCESS_KEY = "xxxxxxx"
UEDITOR_QINIU_SECRET_KEY = "xxxxxxx"
UEDITOR_QINIU_BUCKET_NAME = "xxxxxx"
UEDITOR_QINIU_DOMAIN = "xxxxxxx"

flask需要有一个视图路由来处理,这里我们来配置一个蓝图,创建ueditor.py

#encoding: utf-8

from flask import (
Blueprint,
request,
jsonify,
url_for,
send_from_directory,
current_app as app
)
import json
import re
import string
import time
import hashlib
import random
import base64
import sys
import os
from urllib import parse
# 更改工作目录。这么做的目的是七牛qiniu的sdk
# 在设置缓存路径的时候默认会设置到C:/Windows/System32下面
# 会造成没有权限创建。
os.chdir(os.path.dirname(__file__))
try:
import qiniu
except:
pass
from io import BytesIO bp = Blueprint('ueditor',__name__,url_prefix='/ueditor') UEDITOR_UPLOAD_PATH = ""
UEDITOR_UPLOAD_TO_QINIU = False
UEDITOR_QINIU_ACCESS_KEY = ""
UEDITOR_QINIU_SECRET_KEY = ""
UEDITOR_QINIU_BUCKET_NAME = ""
UEDITOR_QINIU_DOMAIN = "" @bp.before_app_first_request
def before_first_request():
global UEDITOR_UPLOAD_PATH
global UEDITOR_UPLOAD_TO_QINIU
global UEDITOR_QINIU_ACCESS_KEY
global UEDITOR_QINIU_SECRET_KEY
global UEDITOR_QINIU_BUCKET_NAME
global UEDITOR_QINIU_DOMAIN
UEDITOR_UPLOAD_PATH = app.config.get('UEDITOR_UPLOAD_PATH')
if UEDITOR_UPLOAD_PATH and not os.path.exists(UEDITOR_UPLOAD_PATH):
os.mkdir(UEDITOR_UPLOAD_PATH) UEDITOR_UPLOAD_TO_QINIU = app.config.get("UEDITOR_UPLOAD_TO_QINIU")
if UEDITOR_UPLOAD_TO_QINIU:
try:
UEDITOR_QINIU_ACCESS_KEY = app.config["UEDITOR_QINIU_ACCESS_KEY"]
UEDITOR_QINIU_SECRET_KEY = app.config["UEDITOR_QINIU_SECRET_KEY"]
UEDITOR_QINIU_BUCKET_NAME = app.config["UEDITOR_QINIU_BUCKET_NAME"]
UEDITOR_QINIU_DOMAIN = app.config["UEDITOR_QINIU_DOMAIN"]
except Exception as e:
option = e.args[0]
raise RuntimeError('请在app.config中配置%s!'%option) csrf = app.extensions.get('csrf')
if csrf:
csrf.exempt(upload) def _random_filename(rawfilename):
letters = string.ascii_letters
random_filename = str(time.time()) + "".join(random.sample(letters,5))
filename = hashlib.md5(random_filename.encode('utf-8')).hexdigest()
subffix = os.path.splitext(rawfilename)[-1]
return filename + subffix @bp.route('/upload/',methods=['GET','POST'])
def upload():
action = request.args.get('action')
result = {}
if action == 'config':
config_path = os.path.join(bp.static_folder or app.static_folder,'ueditor','config.json')
with open(config_path,'r',encoding='utf-8') as fp:
result = json.loads(re.sub(r'\/\*.*\*\/','',fp.read())) elif action in ['uploadimage','uploadvideo','uploadfile']:
image = request.files.get("upfile")
filename = image.filename
save_filename = _random_filename(filename)
result = {
'state': '',
'url': '',
'title': '',
'original': ''
}
if UEDITOR_UPLOAD_TO_QINIU:
if not sys.modules.get('qiniu'):
raise RuntimeError('没有导入qiniu模块!')
q = qiniu.Auth(UEDITOR_QINIU_ACCESS_KEY,UEDITOR_QINIU_SECRET_KEY)
token = q.upload_token(UEDITOR_QINIU_BUCKET_NAME)
buffer = BytesIO()
image.save(buffer)
buffer.seek(0)
ret,info = qiniu.put_data(token,save_filename,buffer.read())
if info.ok:
result['state'] = "SUCCESS"
result['url'] = parse.urljoin(UEDITOR_QINIU_DOMAIN,ret['key'])
result['title'] = ret['key']
result['original'] = ret['key']
else:
image.save(os.path.join(UEDITOR_UPLOAD_PATH, save_filename))
result['state'] = "SUCCESS"
result['url'] = url_for('ueditor.files',filename=save_filename)
result['title'] = save_filename,
result['original'] = image.filename elif action == 'uploadscrawl':
base64data = request.form.get("upfile")
img = base64.b64decode(base64data)
filename = _random_filename('xx.png')
filepath = os.path.join(UEDITOR_UPLOAD_PATH,filename)
with open(filepath,'wb') as fp:
fp.write(img)
result = {
"state": "SUCCESS",
"url": url_for('files',filename=filename),
"title": filename,
"original": filename
}
return jsonify(result) @bp.route('/files/<filename>/')
def files(filename):
return send_from_directory(UEDITOR_UPLOAD_PATH,filename)

在主程序中注册蓝图

from flask import Flask,render_template
from ueditor import bp
import config app = Flask(__name__)
app.config.from_object(config) app.register_blueprint(bp) @app.route('/')
def hello_world():
return render_template('index.html') if __name__ == '__main__':
app.run(port=9000,debug=True)

编辑index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="{{ url_for('static',filename='ueditor/ueditor.config.js') }}"></script>
<script src="{{ url_for('static',filename='ueditor/ueditor.all.min.js') }}"></script>
<title>Title</title>
</head>
<body>
<script id="editor" type="text/plain">
</script>
<script>
var ue = UE.getEditor("editor",{
'serverUrl': '/ueditor/upload/'
});
</script>
</body>
</html>

Flask实战第57天:UEditor编辑器集成以及配置上传文件到七牛的更多相关文章

  1. 关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手

    关于富文本编辑器ueditor(jsp版)上传文件到阿里云OSS的简单实例,适合新手   本人菜鸟一枚,最近公司有需求要用到富文本编辑器,我选择的是百度的ueditor富文本编辑器,闲话不多说,进入正 ...

  2. 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  3. ueditor 编辑器,自定义图片上传

    <div> <h1>完整demo</h1> <form method="post" name="form"> & ...

  4. Flask实战第55天:cms轮播图上传到七牛功能完成

    登录七牛云,进入“对象存储”, 新建存储空间(Bucket), 我创建的空间命名为flask-bbs 创建完Bucket,七牛会给我们提供一个测试域名,生产环境中,我们需要绑定自己的域名 在个人面板中 ...

  5. 记一次上传文件到七牛云存储的经历(Plupload & UEditor)(.net)

    七牛 配置ACCESS_KEY和SECRET_KEY Qiniu.Conf.Config.ACCESS_KEY = "ACCESS_KEY"; Qiniu.Conf.Config. ...

  6. 百度Ueditor编辑器取消多图上传对话框中的图片搜索

    百度Ueditor确实是一个非常强悍的编辑器,功能强大!但是实际开发需求复杂,总会有各种不符合要求的,比如想要取消多图上传的“图片搜索”选项卡(这个图片搜索真心难用)! 以ueditor 1.4.3为 ...

  7. .Net core3.0 集成swagger5.0上传文件

    .Net core 3.0已经更新了,相信有挺多博主大佬们都更新了如何在.Net core3.0使用swagger,这里就不详细说了. 我们知道,如果.net core 2.x使用swagger上传文 ...

  8. 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能

    UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...

  9. 教你如何调用百度编辑器ueditor的上传图片、上传文件等模块

    出于兴趣爱好,前段时间自己尝试写了一个叫simple的cms,里面使用了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片.正好我又是个懒人,发现有现成的 ...

随机推荐

  1. 小程序_RSA加密功能

    这是开发的第三个小程序,基于一个物流系统,简化功能开发下单流程.登录的时候,系统是使用RSA进行加解密的. 流程:第一个接口获取到后端传过来的密匙共钥(publicKey),通过公钥使用RSA加密密码 ...

  2. 区块链~Merkle Tree(默克尔树)算法解析~转载

    转载~Merkle Tree(默克尔树)算法解析 /*最近在看Ethereum,其中一个重要的概念是Merkle Tree,以前从来没有听说过,所以查了些资料,学习了Merkle Tree的知识,因为 ...

  3. jython

    # -*- coding: utf-8 -*- import sys import json sys.path += ["C:/Users/yangbo/Desktop/restassure ...

  4. win7旗舰版64位缺失tbb.dll文件

    win7旗舰版64位缺失tbb.dll文件 https://zhidao.baidu.com/question/688589990330312804.html 到好的电脑中复制一个,黏贴到下同的路径下 ...

  5. sicily 1036. Crypto Columns

    Constraints Time Limit: 1 secs, Memory Limit: 32 MB Description The columnar encryption scheme scram ...

  6. STL容器之间的差异和联系

     1.vector  (连续的空间存储,可以使用[]操作符)快速的访问随机的元素,快速的在末尾插入元素,但是在序列中间的插入,删除元素要慢(涉及元素复制移动),而且如果一开始分配的空间不够的话,有一个 ...

  7. Linq to SQL 小结

    前天开始看这方面的资料,虽然看了网上对比 sql和linq的速度,万条数据可能要慢1/4左右的数度,但是介于的方便,还是学了 首先看看linq的基本语法: FROM XX IN DATASOURCE ...

  8. ASP.NET Core学习链接

    https://www.cnblogs.com/artech/p/dependency-injection-in-asp-net-core.html http://www.cnblogs.com/ar ...

  9. javascript 实现图片放大镜功能

    淘宝上经常用到的一个功能是利用图片的放大镜功能来查看商品的细节 下面我们来实现这样一个功能吧,原理很简单: 实现一个可以随鼠标移动的虚框 在另外一个块中对应显示虚框中的内容 实现思路: 虚框用css中 ...

  10. 关于移动端audio自动播放问题

    本人小白全栈一枚,给公司写了一个监控中心,要求严重报警的时候需要触发音频播放,于是就有了以下的折腾. 刚开始一切都很顺利,自然而然的写了以下代码. <audio id="myaudio ...