一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛

富文本编辑框，选择UEditor

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

使用说明：http://fex.baidu.com/ueditor/

使用

下载下来过后，将指定的几个文件和文件夹拷贝到项目static下

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

视图

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def hello_world():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

运行

由于没有python版本，所以很多功能用不了

解决方案，写一个集成的包

# 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)

配置文件储存目录

注册蓝图和使用配置

页面

<!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>

上传图片

同时，如果不想存在本地，也可以放到七牛云，这里设置了开关

一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛的更多相关文章

一百三十：CMS系统之七牛js和python的SDK使用示例
1.安装: pip install qiniu 2.编写获取uptoken的接口 @app.route('/uptoken/')def uptoken(): access_key = '' secre ...
一百三十三：CMS系统之版块管理一
把模型创建到公共的models里面 class BoardModel(db.Model): __tablename__ = 'board' id = db.Column(db.Integer, pri ...
Java开发笔记（一百三十五）Swing的文件对话框
除了常规的提示对话框,还有一种对话框也很常见,它叫做文件对话框.文件对话框又分为两小类:打开文件的对话框.保存文件的对话框,但在Swing中它们都用类型JFileChooser来表达.下面是JFile ...
一百三十七：CMS系统之发布帖子前台布局
把前面配置好的ueditor的文件复制到static下把ueditor蓝图导入,注册初始化ueditor //初始化ueditor$(function () { var ue = UE.getEd ...
一百三十一：CMS系统之轮播图上传图片功能
将七牛js放到common下把获取uptoken的接口放到common视图中把初始化七牛放到banners.js中 //初始化七牛$(function () { qiniujs.setUp({ ' ...
一百二十：CMS系统之注册功能前后端逻辑
给提交按钮加一个id,方便写js js //发送ajax请求注册请求$(function () { $('#submit-btn').click(function (event) { event.pr ...
Flask实战第55天：cms轮播图上传到七牛功能完成
登录七牛云,进入“对象存储”, 新建存储空间(Bucket), 我创建的空间命名为flask-bbs 创建完Bucket,七牛会给我们提供一个测试域名,生产环境中,我们需要绑定自己的域名在个人面板中 ...
Gradle 1.12用户指南翻译——第三十五章. Sonar 插件
本文由CSDN博客万一博主翻译,其他章节的翻译请参见: http://blog.csdn.net/column/details/gradle-translation.html 翻译项目请关注Githu ...
centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件、目录属性 shell数组简单用法 $( ) 和${ } 和$(( )) 与 sh -n sh -x sh -v 第三十五节课
centos shell脚本编程1 正则 shell脚本结构 read命令 date命令的用法 shell中的逻辑判断 if 判断文件.目录属性 shell数组简单用法 $( ) 和$ ...

随机推荐

08 Windows编程——画图
源码 #include<Windows.h> #include<tchar.h> #include<stdio.h> #define NUM 1000 LRESUL ...
虚拟机mysql报错的问题
Can't connect to local MySQL server through socket '/var/lib/mysql/mysql.sock' (111)解决方法登陆mysql的时 ...
Linux教程 Find命令的使用
Linux中的Find(查找)命令是在Linux系统中最重要并且更有用的命令之一.Find命令主要用于指定匹配文件条件的参数查找或者定位文件和目录的列表.Find命令能够被使用基于各种各样的条件,例如 ...
jade-render-renderFile
var http = require('http'); var jade = require('jade'); http.createServer(function(req, res){ res.wr ...
JAVA连接Derby数据库
其实,JAVA连接Derby数据库也很简单,和一般的数据库操作一样:1.加载驱动2.获取连接3.进行数据库操作4.记得关闭连接示例如下: import java.sql.ResultSet; imp ...
kafka相关
一.消息队列优点(解耦.异步.削峰)二.用消息队列都有什么优点和缺点?三.kafka.activemq.rabbitmq.rocketmq都有什么区别四.如何保证消息队列的高可用啊?五.如何保证消息不 ...
Selenium（七）多窗口切换、等待方法、alert对话框处理
一.多窗口切换 1.打开百度首页 2.在百度中搜索博客园 3.从搜索结果中跳转到博客园 4.博客园首页和百度搜索页面切换 handle:句柄二.等待方法 time.sleep(5) 先导入方法参数 ...
python的logging日志模块(二)
晚上比较懒,直接搬砖了. 1.简单的将日志打印到屏幕 import logging logging.debug('This is debug message') logging.info('Thi ...
nginx的access log按小时生成
1.在server或location段进行配置 if ($time_iso8601 ~ "^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})&q ...
VueCropper 图片裁剪
基于vue的图片裁剪vue-cropper 简小咖关注 0.2 2018.12.12 15:42 字数 164 阅读 3900评论 1喜欢 3 vue-cropper官网http://xyxiao ...

一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛

一百三十五：CMS系统之UEditoe编辑器集成以及配置将图片上传到七牛的更多相关文章

随机推荐

热门专题