富文本编辑框，选择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. 1.Hbase简介
			
    1. Hbase简介 1.1. 什么是hbase(面向列) HBASE是一个高可靠性.高性能.面向列.可伸缩的分布式存储系统,利用HBASE技术可在廉价PC Server上搭建起大规模 结构化存储集群 ...
    
			
    2. 
						
  2. alibaba 用360的evpp -》个别项目
			
    
			
    3. 
						
  3. Windows Media Player播放视频导致程序闪退
			
    在有的电脑上发现,使用Windows Media Player组件播放视频导致程序闪退. 发现是显卡问题,独立显卡换成集成显卡 解决: 打开显卡控制面板->管理3D设置->集成图形-> ...
    
			
    4. 
						
  4. java中的文件上传下载
			
    java中文件上传下载原理 学习内容 文件上传下载原理 底层代码实现文件上传下载 SmartUpload组件 Struts2实现文件上传下载 富文本编辑器文件上传下载 扩展及延伸 学习本门课程需要掌握 ...
    
			
    5. 
						
  5. pandas实现hive的lag和lead函数 以及 first_value和last_value函数
			
    lag和lead VS shift 该函数的格式如下: 第一个参数为列名, 第二个参数为往上第n行(可选,默认为1), 第三个参数为默认值(当往上第n行为NULL时候,取默认值,如不指定,则为NULL ...
    
			
    6. 
						
  6. python2和python3编程差异杂谈（-）
			
    python2 默认编码ascii 在使用中文时要显示的声明   #-*-encoding:utf-8-*- python3 默认编码utf-8,良好的支持了中文输入 python2: print函数 ...
    
			
    7. 
						
  7. Java8-Lambda-No.03
			
    import java.util.Comparator; import java.util.Objects; import java.util.UUID; import java.util.concu ...
    
			
    8. 
						
  8. java正则表达式——总结
			
    在JDK 1.4中,Java增加了对正则表达式的支持. java与正则相关的工具主要在java.util.regex包中:此包中主要有两个类:Pattern.Matcher. Pattern  模式类 ...
    
			
    9. 
						
  9. Appium自动化测试教程-自学网-Package与Activity
			
    Package Package 包.只是在我们的app中这个Package是唯一的,就像你身份证号码一样.在我们做app自动化时,我们就需要知道他的Package,我们知道了Package那么也就知道 ...
    
			
    10. 
						
  10. .net加密
			
    Microsoft .NET 中的简化加密 http://www.51cto.com/specbook/15/3407.htm 1.SHA1 using System.Security.Cryptog ...
    
			
    11.