1.1 到官网下载UEditor最新版: 官网地址
1.2 创建demo文件
解压下载的包, 在解压后的目录创建demo.html文件, 填入下面的html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ueditor demo</title>
</head>
<body>
<!-- 加载编辑器的容器 -->
<script id="container" name="content" type="text/plain">
这里写你的初始化内容
</script>
<!-- 配置文件 -->
<script type="text/javascript" src="ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="ueditor.all.min.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container');
</script>
</body>
</html>
1.3 在浏览器打开demo.html
如果看到了下面这样的编辑器, 恭喜你, 初次部署成功!
![[外链图片转存失败(img-zVsA5VUz-1565843026199)(/Users/xiaoge/Downloads/assests/image-20190815113713273.png)]](https://i-blog.csdnimg.cn/blog_migrate/bb8d761f725b754384d9cdb12e11c9ff.png)
1.4 但是图片上传功能不能实现
实践-让图片上传功能也能实现-Flask
-
前端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 配置文件 --> <script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.config.js') }}"></script> <!-- 编辑器源码文件 --> <script type="text/javascript" src="{{ url_for('static', filename='ueditor/ueditor.all.min.js') }}"></script> </head> <body> <!-- 加载编辑器的容器 --> <script id="editor" type="text/plain"></script> <!-- 实例化编辑器 --> <script type="text/javascript"> // 第一个参数是上面编辑器的id, id自己取但是一定要一致 var ue = UE.getEditor('editor', { // 这是后端处理的路由 "serverUrl": "/ueditor/upload/" }); </script> </body> </html> -
ueditor.py—这是自己写的一个包, 能让图片上传到本地服务器, 也能上传到七牛云(因为ueditor没有支持python的)
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) -
config.py
import os # 这是讲文件上传到本地服务器的images下 # config所在的路径os.path.dirname(__file__) UEDITOR_UPLOAD_PATH = os.path.join(os.path.dirname(__file__), 'images') # 这是配置的上传到七牛的, 你配置了这个那么文件就会直接上传到七牛 UEDITOR_UPLOAD_TO_QINIU = True # AccessKey UEDITOR_QINIU_ACCESS_KEY = "*****************************************" # SecretKey UEDITOR_QINIU_SECRET_KEY = "*****************************************" # 上传的空间名称 UEDITOR_QINIU_BUCKET_NAME = "********" # 域名 七牛的域名 也可以用七牛给的测试域名 UEDITOR_QINIU_DOMAIN = "http://***************/" -
ueditor_demo.py
from flask import Flask, render_template # 把ueditor制作成了一个蓝图 from ueditor import bp import config app = Flask(__name__) # 绑定config文件 app.config.from_object(config) # 注册蓝图 app.register_blueprint(bp) @app.route('/') def index(): return render_template("index.html") if __name__ == '__main__': app.run(debug=True)Demo的目录结构------ueditor必须放在static下, 要不然我写的蓝图找不到这个文件
![[外链图片转存失败(img-ZWvlQsf0-1565843026201)(/Users/xiaoge/Downloads/assests/image-20190815121945693.png)]](https://i-blog.csdnimg.cn/blog_migrate/7ac812ca136eaa1292a944bb322a454f.png)
-
static下的ueditor里的这些包都是官网里面的, 在官网随便下载个包就行了
dialogs lang themes third-party ueditor.all.min.js ueditor.config.js 这都是你下载官网的包是时里面自带的 -
config.json—这个包的内容
/* 前后端通信相关的配置,注释只允许使用多行方式 */ { /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 执行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传大小限制，单位B */ "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */ "imageCompressEnable": true, /* 是否压缩图片,默认是true */ "imageCompressBorder": 1600, /* 图片压缩最长边限制 */ "imageInsertAlign": "none", /* 插入的图片浮动方式 */ "imageUrlPrefix": "", /* 图片访问路径前缀 */ "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */ /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */ /* {time} 会替换成时间戳 */ /* {yyyy} 会替换成四位年份 */ /* {yy} 会替换成两位年份 */ /* {mm} 会替换成两位月份 */ /* {dd} 会替换成两位日期 */ /* {hh} 会替换成两位小时 */ /* {ii} 会替换成两位分钟 */ /* {ss} 会替换成两位秒 */ /* 非法字符 \ : * ? " < > | */ /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */ /* 涂鸦图片上传配置项 */ "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */ "scrawlFieldName": "upfile", /* 提交的图片表单名称 */ "scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */ "scrawlUrlPrefix": "", /* 图片访问路径前缀 */ "scrawlInsertAlign": "none", /* 截图工具上传 */ "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */ "snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */ "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */ /* 抓取远程图片配置 */ "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"], "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */ "catcherFieldName": "source", /* 提交的图片列表表单名称 */ "catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "catcherUrlPrefix": "", /* 图片访问路径前缀 */ "catcherMaxSize": 2048000, /* 上传大小限制，单位B */ "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */ /* 上传视频配置 */ "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */ "videoFieldName": "upfile", /* 提交的视频表单名称 */ "videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "videoUrlPrefix": "", /* 视频访问路径前缀 */ "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */ "videoAllowFiles": [ ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */ /* 上传文件配置 */ "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */ "fileFieldName": "upfile", /* 提交的文件表单名称 */ "filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */ "fileUrlPrefix": "", /* 文件访问路径前缀 */ "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */ "fileAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ], /* 上传文件格式显示 */ /* 列出指定目录下的图片 */ "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */ "imageManagerListPath": "/ueditor/php/upload/image/", /* 指定要列出图片的目录 */ "imageManagerListSize": 20, /* 每次列出文件数量 */ "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */ "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */ "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */ /* 列出指定目录下的文件 */ "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */ "fileManagerListPath": "/ueditor/php/upload/file/", /* 指定要列出文件的目录 */ "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */ "fileManagerListSize": 20, /* 每次列出文件数量 */ "fileManagerAllowFiles": [ ".png", ".jpg", ".jpeg", ".gif", ".bmp", ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid", ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso", ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml" ] /* 列出的文件类型 */ }
3463
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
