下面是使用Tornado 做后端，接收从富文本编辑器 wangEditor 上传图片的完整例子
文件目录结构
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
./
├── 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 脚本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
#!/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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<!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/topic/134.html 转摘请注明来源