一百三十五：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数组简单用法 $( ) 和$ ...

随机推荐

Python概要介绍
Python的由来 Python的创始人(Guido Van Rossum)吉多·范罗苏姆——龟叔,1989年圣诞节期间,在阿姆斯特丹,Guido为了打发圣诞节的无趣,决心开发一个新的脚本解释程序,做 ...
python3 多线程和多进程
一.线程和进程 1.操作系统中,线程是CPU调度和分派的基本单位,线程依存于程序中 2.操作系统中,进程是系统进行资源分配和调度的一个基本单位,一个程序至少有一个进程 3.一个进程由至少一个线程组成, ...
linux 优化
如何优化Linux系统? 1)不用root超级用户登录,添加普通用户,通过sudo授权管理:/etc/sudoers 2)更改默认的远程连接ssh服务端口号,禁止root用户远程登录到服务器:/etc ...
idea 插件的使用
idea 插件的使用进阶篇(个人收集使用中的) 恭喜你,如果你已经看到这篇文章,证明在idear使用上已经初有小成!那么就要向着大神进发了! 下边就是大神之路! 插件的设置在 IntelliJ I ...
洛谷P2114 起床困难综合症【位运算】【贪心】
题目:https://www.luogu.org/problemnew/show/P2114 题意:有n个操作,每个可以是与.或.异或一个数. 初始值是0~m之间的一个数,问经过n个运算之后,可以得 ...
SQL分表
一.为什么要水平分表?简而言之,当单表数据量过大时,无法对其进行有效的维护,以及查询速度严重变慢时,我们就需要对其时行水平分表. 二.什么时候需要水平分表?在数据库结构的设计中,需要充分考虑后期数据的 ...
Sql Server中REPLACE函数的使用
在sql的使用过程当中,我们偶尔会遇到这样一种情况,就是需要改变数据的存储形式,比如数据库某一张表(Info)当中有一个字段Educational(学历),以前存储的是Json数组,现在由于需求的改变 ...
JavaScript中的变量提升和严格模式
1.什么是变量提升所谓的变量提升指的是:函数声明和变量声明总是会被解释器悄悄地被"提升"到方法体(作用域)的最顶部. //先声明后使用 var x; console.log(x) ...
window、BOM、 document、 DOM
window: 顾名思义,窗口,浏览器窗口.是Window构造函数的一个实例对象. 它包含浏览器的一些属性和方法,如screen,location,history,setInterval等. // ...
Archiva 不小心删掉了管理员权限怎么办
Archiva 的界面和 UI 比较容易出问题. 在添加用户和为用户进行权限修改的时候,不小心连 admin 这个用户的权限都删掉了. 这个时候应该如何恢复 admin 这个用户的权限? 这个时候你可 ...

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

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

随机推荐

热门专题