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>

标签

Tornado + wangEditor 图片上传的完整例子

文件目录结构

后端

前端

发表第一条评论！

相关推荐

小工具

标签

最近发表

最近浏览