富文本编辑框，选择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编辑器集成以及配置将图片上传到七牛的更多相关文章
	

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

	


随机推荐
	

    
									
  1. JLINK固件烧写
			
    最近在使用uVision V5.14.0.0 的时候,由于我使用的Jlink是盗版的,导致软件总是退出,然后再网上找到了解决办法. 下面介绍解决办法: 参考: http://www.9mcu.com/ ...
    
			
    2. 
						
  2. NoNodeAvailableException[None of the configured nodes are available:
			
    elasticSearch的错误 NoNodeAvailableException[None of the configured nodes are available: [{#transport#- ...
    
			
    3. 
						
  3. 【2017-12-12】Winform----Datagirdview使用
			
    1.数据绑定 DataGirdView.DataSource = list集合 2.复选框 获取复选框选中状态 for (int i = 0; i < dataGridView1.RowCoun ...
    
			
    4. 
						
  4. jade反编译，把html编译成jade
			
    通过上面的学习,了解了一个jade模板怎么编译成一个html页面,现在介绍一个工具,怎么把html页面编译成一个jade模板 命令行 npm install html2jade -g 安装到全局 第一 ...
    
			
    5. 
						
  5. 使用IDEA快速搭建基于Maven的SpringBoot项目(集成使用Redis)
			
    迫于好久没写博客心慌慌,随便写个简单版的笔记便于查阅. 新建项目 新建项目 然后起名 继续next netx finish. 首先附上demo的项目结构图 配置pom.xml <?xml ver ...
    
			
    6. 
						
  6. 0004SpringBoot整合Redis
			
    在已经整合了SpringDataJPA和Junit的基础上,整合Redis,只需要一下几步即可: 1.下载64windows版的Redis安装包.解压并启动服务端 2.配置Redis的起步依赖(pom ...
    
			
    7. 
						
  7. mysql基础篇--表的管理
			
    表的创建 常见的数据类型 数值型: 整型 tinyint.smallint.mediumint.int/integer.bigint 特点: 1.如果不设置无符号还是有符号,默认是有符号,如果想设置无 ...
    
			
    8. 
						
  8. django创建路径导航
			
    路径导航 :         1.怎样设置需要登录但又不需要验证权限的路径 :                 在settings中定义一个列表,列表中以正则的方式放入需要登录但无需验证的权限的项.在 ...
    
			
    9. 
						
  9. 题解 [JOI 2019 Final] 独特的城市
			
    题面 解析 首先有一个结论, 对一个点\(x\)有贡献的城市 肯定在它到离它较远的直径的端点的链上. 假设离它较远的端点是\(S\), 如果有一个点\(u\)不在\(x\)到\(S\)的链上, 却对\ ...
    
			
    10. 
						
  10. IDEA创建类似于Eclipse的source folder
			
    1.新建普通文件夹目录directory 2.当前Module右键Open Mudule Settings(F12) 3.选中新建的文件夹并单击上面的Sources,看到文件夹颜色变化即成功.
    
			
    11.