Tornado + wangEditor 图片上传的完整例子
🕞 by pyList at 2016-08-19 14:56
下面是使用Tornado 做后端,接收从富文本编辑器 wangEditor 上传图片的完整例子
文件目录结构
./
├── blog.py
├── static
│ ├── dist
│ │ ├── css
│ │ │ ├── fonts
│ │ │ │ ├── icomoon.eot
│ │ │ │ ├── icomoon.svg
│ │ │ │ ├── icomoon.ttf
│ │ │ │ └── icomoon.woff
│ │ │ ├── wangEditor.css
│ │ │ ├── wangEditor.less
│ │ │ └── wangEditor.min.css
│ │ └── js
│ │ ├── lib
│ │ │ ├── jquery-1.10.2.min.js
│ │ │ └── jquery-2.2.1.js
│ │ ├── wangEditor.js
│ │ └── wangEditor.min.js
│ └── upload
│ ├── 11982e4d3793185426851a7a97a1375c.png
│ ├── 11ab600f71a0ce5f0cd62e176cb21419.png
│ └── 22e50c7e74604b01124bc33b4b9b3df2.png
└── templates
└── home.html
后端
python 脚本
#!/usr/bin/env python
# -*- coding: utf-8 -*-
import os
import sys
reload(sys)
sys.setdefaultencoding('utf-8')
import os.path
from hashlib import md5
import tornado.escape
import tornado.httpserver
import tornado.ioloop
import tornado.options
import tornado.web
from tornado.options import define, options
define("port", default=8888, help="run on the given port", type=int)
class Application(tornado.web.Application):
def __init__(self):
handlers = [
(r"/", HomeHandler),
(r"/upload", UploadHandler),
]
settings = dict(
blog_title="wang Editor",
template_path=os.path.join(os.path.dirname(__file__), "templates"),
static_path=os.path.join(os.path.dirname(__file__), "static"),
xsrf_cookies=True,
cookie_secret="__TODO:_GENERATE_YOUR_OWN_RANDOM_VALUE_HERE__",
debug=True,
)
super(Application, self).__init__(handlers, **settings)
class BaseHandler(tornado.web.RequestHandler):
pass
class HomeHandler(BaseHandler):
def get(self):
self.render("home.html", xsrf_token=self.xsrf_token)
class UploadHandler(BaseHandler):
def post(self):
upload_path = os.path.join(os.path.dirname(__file__), 'static/upload')
file_metas = []
_fl = ['wangEditorH5File', 'wangEditorFormFile', 'wangEditorPasteFile', 'wangEditorDragFile']
for _k in _fl:
if _k in self.request.files:
file_metas = self.request.files[_k]
break
for meta in file_metas:
# count file md5
_hash = md5()
_hash.update(meta['body'])
_f_md5 = _hash.hexdigest()
_file_ex = ''
filename = meta['filename']
_fex = filename.split('.')
if len(_fex) >= 2:
_file_ex = _fex[-1]
new_file_name = '%s.%s' % (_f_md5, _file_ex)
filepath = os.path.join(upload_path, new_file_name)
with open(filepath, 'wb') as up:
up.write(meta['body'])
self.write('/%s' % filepath)
return
self.write("error|服务器端错误")
def main():
tornado.options.parse_command_line()
http_server = tornado.httpserver.HTTPServer(Application())
http_server.listen(options.port)
tornado.ioloop.IOLoop.current().start()
if __name__ == "__main__":
main()
前端
模版内容 home.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{{ escape(handler.settings["blog_title"]) }}</title>
<link rel="stylesheet" type="text/css" href="/static/dist/css/wangEditor.min.css">
<script src="{{ static_url("dist/js/lib/jquery-1.10.2.min.js") }}"></script>
</head>
<body>
<textarea id="textarea1" style="width: 80%;height:500px;">
<p>请输入内容...</p>
</textarea>
<button id="btn1">获取内容</button>
<script type="text/javascript" src="/static/dist/js/wangEditor.min.js"></script>
<!--这里引用jquery和wangEditor.js-->
<script type="text/javascript">
wangEditor.config.printLog = false;
var editor = new wangEditor('textarea1');
// 参数配置
// 菜单
editor.config.menus = [
'source',
//'|',
'bold',
'underline',
'italic',
'strikethrough',
'eraser',
'forecolor',
'bgcolor',
'quote',
//'fontfamily',
'fontsize',
'head',
'unorderlist',
'orderlist',
'alignleft',
'aligncenter',
'alignright',
'|',
'link',
'unlink',
'table',
'emotion',
'|',
'img',
'video',
'|',
'undo',
'redo',
];
// 颜色
//editor.config.colors = {
// '#880000': '暗红色',
// '#800080': '紫色',
// '#ff0000': '红色'
//};
editor.config.pasteFilter = true;
editor.config.pasteText = true;
// 上传图片
editor.config.uploadImgUrl = '/upload';
editor.config.uploadParams = {
_xsrf: '{{xsrf_token}}',
};
// 设置 headers
editor.config.uploadHeaders = {
'Accept' : 'text/x-json'
};
editor.create();
// 初始化编辑器的内容
editor.$txt.html('<p>要初始化的内容</p>');
// 追加内容
editor.$txt.append('<p>新追加的内容222</p>');
$('#btn1').click(function () {
console.log('----获取内容----');
// 获取编辑器区域完整html代码
var html = editor.$txt.html();
console.log(html);
// 获取编辑器纯文本内容
// var text = editor.$txt.text();
// console.log(text);
// 获取格式化后的纯文本
// var formatText = editor.$txt.formatText();
// console.log(formatText);
});
</script>
</body>
</html>
本文网址: https://pylist.com/t/1471589812 (转载注明出处)
如果你有任何建议或疑问可以在下面 留言
发表第一条评论!
相关推荐
小工具
标签
tornado
优雅
重启
例子
完整
coroutine
yield
一个
nginx
上传
服务器
中断
文件
vps
mysql
128
示例
subprocess
阻塞
调用
推送
功能
消息
websockets
测试方法
服务
服务器端
websocket
客户端
py
sae
tenjin
模板
python
form
data
post
u盘
mac
diskutil
格式化
顽固
硬件加速
ubnt
er
固件
路由
google
身份验证
authenticator
迁移
手机
宅家
坑记
屏幕
动手
虚拟机
virtualbox
很慢
网络
解决
搜索引擎
网址
提交
主动
经验
一次方程
一元
代码
简单
cpu
debian
ubuntu
查看
温度
bbr
openwrt
开启
gmail
smtp
发信
密码
开通
最新版
wndr4300
升级
国内
老旧
笔记本
改造
记录
正则
关键字
搜索
caddy
https
部署
网站
多个
修砖记
变砖
tftp
failed
load
devtools
sourcemap
chrome
自动更新
microsoft
关闭
app
store
登录
未知
静音
风扇
主机
低功耗
web
爬虫
组装
微信
尝鲜
视频
体验
server
浏览
webdriver
微博
golang
selenium
gnu
linux
安装
系统启动
usb
编译
quic
抢先
最近发表
- Chrome 控制台 DevTools failed to load SourceMap 警告的消除方法
- Mac 关闭 Microsoft 自动更新
- Mac 登录 App Store 出现“发生了未知错误”的解决方法
- 老笔记本改造为无风扇静音主机方案
- 自己组装21瓦低功耗家庭爬虫、文件、web服务器
- 微信视频号尝鲜体验
- Ubuntu/Debian 查看CPU温度的方法
- 在Ubuntu/debian Server 系统使用Chrome 无头浏览模式
- 换手机后 Google 身份验证器 Google Authenticator 数据迁移的简单方法
- 使用Golang selenium WebDriver 自动登录微博
- 在 Ubuntu 或其它 GNU/Linux 系统下安装 Debian
- Mac 下制作 USB ubuntu/debian 系统启动、安装盘的几种方法
- ubuntu/debian 下自行编译 OpenWRT 固件
- 宅家自己动手换手机屏幕掉坑记
- 路由 UBNT ER-X 官方固件升级及开启硬件加速的方法
- 在 Nginx 和 Golang web 上抢先体验 QUIC
最近浏览
- 在终端使用Mac diskutil 命令格式化顽固U盘
- 路由 UBNT ER-X 官方固件升级及开启硬件加速的方法
- 换手机后 Google 身份验证器 Google Authenticator 数据迁移的简单方法
- 宅家自己动手换手机屏幕掉坑记
- VirtualBox 虚拟机里网络很慢的解决方法
- 向各搜索引擎主动提交网址的经验
- 3行 Python 代码解简单的一元一次方程
- Ubuntu/Debian 查看CPU温度的方法
- Openwrt 路由上开启BBR
- 使用Gmail smtp发信,开通专用密码的方法
- WNDR4300 固件升级到 OpenWrt 最新版
- OpenWrt 国内源
- 把老旧笔记本改造为家庭服务器过程记录
- 用python正则获取通过搜索引擎过来的搜索关键字
- 使用caddy 快速部署多个https 网站
- UBNT ER-X 变砖 tftp 修砖记