百度Ueditor与Tornado后端接口集成

最新推荐文章于 2024-07-22 13:23:56 发布
最新推荐文章于 2024-07-22 13:23:56 发布
阅读量118 收藏
点赞数
文章标签： 后端 php json
原文链接：http://blog.51cto.com/lang8027/2045136
版权

概述：

由于Ueditor官方的后端只有PHP, ASP, ASP.NET, JSP四种，没有相应的python实现。我结合python的tornado框架实现了ueditor中的图片，文件及涂鸭上传的功能。

一. 下载Ueditor

从Ueditor官网下载最新版本： http://ueditor.baidu.com/build/build_down.php?n=ueditor&v=1_4_3_3-utf8-php
（这里我用的是php的版本)

二. 集成到tornado中

2.1 解压放置ueditor到项目中
将ueditor1_4_3_3-utf8-php.zip解压到项目目录 /static 下, 项目目录结构如下：
百度Ueditor与Tornado后端接口集成

2.2 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <title>Ueditor</title>
        <script type="text/javascript" src="/static/ueditor/ueditor.config.js"></script>
        <script type="text/javascript" src="/static/ueditor/ueditor.all.js"></script>
        <script type="text/javascript" src="/static/ueditor/ueditor.parse.js"></script>
        <link rel=stylesheet href='/static/ueditor/third-party/SyntaxHighlighter/shCoreDefault.css' />
        <script type=text/javascript src='/static/ueditor/third-party/SyntaxHighlighter/shCore.js'></script>        
        <script type=text/javascript>SyntaxHighlighter.all()</script>
    </head>
<body>
<script id="container" name="content" type="text/plain"></script>
<script type="text/javascript">
    var config = {
        initialFrameWidth: null,
        initialFrameHeight: 600,
    }
    var ue = UE.getEditor('container', config);

</script>
</body></html>

2.3 修改Ueditor的配置文件ueditor.config.js

window.UEDITOR_HOME_URL = "/static/ueditor/"     // 添加ueditor在项目中的相对路径
, serverUrl: "/upload"                                                   // 修改服务器统一请求接口路径

2.4 添加后端部署文件config.json

    "imageActionName": "uploadimage",
    "imageFieldName": "upfile",
    "imageMaxSize": 2048000,
    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
    "imageCompressEnable": true,
    "imageCompressBorder": 1600,
    "imageInsertAlign": "none",
    "imageUrlPrefix": "http://127.0.0.1:5000/",
    "imagePathFormat": "static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", 

    "scrawlActionName": "uploadscrawl",
    "scrawlFieldName": "upfile",
    "scrawlPathFormat": "static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "scrawlMaxSize": 2048000,
    "scrawlUrlPrefix": "http://127.0.0.1:5000/",
    "scrawlInsertAlign": "none",

    "snapscreenActionName": "uploadimage",
    "snapscreenPathFormat": "static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "snapscreenUrlPrefix": "http://127.0.0.1:5000/",
    "snapscreenInsertAlign": "none",

    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
    "catcherActionName": "catchimage",
    "catcherFieldName": "source",
    "catcherPathFormat": "static/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
    "catcherUrlPrefix": "http://127.0.0.1:5000/",
    "catcherMaxSize": 2048000,
    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],

    "videoActionName": "uploadvideo",
    "videoFieldName": "upfile",
    "videoPathFormat": "static/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
    "videoUrlPrefix": "http://127.0.0.1:5000/",
    "videoMaxSize": 102400000,
    "videoAllowFiles": [
        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",
        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"],

    "fileActionName": "uploadfile",
    "fileFieldName": "upfile",
    "filePathFormat": "static/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}",
    "fileUrlPrefix": "http://127.0.0.1:5000/",
    "fileMaxSize": 51200000,
    "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",
    "imageManagerListPath": "static/upload/image/",
    "imageManagerListSize": 20,
    "imageManagerUrlPrefix": "http://127.0.0.1:5000/",
    "imageManagerInsertAlign": "none",
    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],

    "fileManagerActionName": "listfile",
    "fileManagerListPath": "static/upload/file/",
    "fileManagerUrlPrefix": "http://127.0.0.1:5000/",
    "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"
    ]
}

此文件由php目录中的config.json改写而成，但是需要注意： *PathFormat的static前不能有'/', 在windows进行路径连接时会出现问题。

2.5 tornado实现
myapp.py代码:

import os
import stat
from datetime import datetime
import random
import json
import base64

import tornado.httpserver
import tornado.ioloop
from tornado.web import Application, RequestHandler, authenticated
from tornado.options import define, options

define("port", default=5000, help="port", type=int)

basedir = os.path.dirname(os.path.abspath(__file__))

class Upload(object):
    ''' upload image or file    '''
    def __init__(self):
        self.config = {}

        self.oriName = ''      # 原始文件名
        self.fileName = ''     # 新文件名
        self.fullName = ''     # 完整文件名,即从当前配置目录开始的URL
        self.filePath = ''     # 完整文件名,即从当前配置目录开始的URL
        self.fileSize = 0      # 文件大小
        self.fileType = ''     # 文件类型
        self.stateMap = {
            "SUCCESS": "SUCCESS",             # 上传成功标记，在UEditor中内不可改变，否则flash判断会出错
            "ERROR_FILE_MAXSIZE": "文件大小超出 upload_max_filesize 限制",
            "ERROR_FILE_LIMITSIZE": "文件大小超出 MAX_FILE_SIZE 限制",
            "ERROR_FILE_UPLOAD_FAILED": "文件未被完整上传",
            "ERROR_FILE_NOT_UPLOAD": "没有文件被上传",
            "ERROR_FILE_NULL": "上传文件为空",
            "ERROR_SIZE_EXCEED": "文件大小超出网站限制",
            "ERROR_TYPE_NOT_ALLOWED": "文件类型不允许",
            "ERROR_CREATE_DIR": "目录创建失败",
            "ERROR_DIR_NOT_WRITEABLE": "目录没有写权限",
            "ERROR_FILE_SAVE": "文件保存时出错",
            "ERROR_FILE_NOT_FOUND": "找不到上传文件",
            "ERROR_WRITE_CONTENT": "写入文件内容错误"
        }

    def getItem(self, key):
        fp = open("static/ueditor/config.json", 'r')
        config = json.loads(fp.read())
        fp.close()
        for k, v in config.items():
            if k == key:
                return v

    def getStateInfo(self, stateinfo):
        for k, v in self.stateMap.items():
            if k == stateinfo:
                return v

    def checkSize(self):
        if self.fileSize > self.config['maxSize']:
            return False
        else:
            return True

    def checkType(self):
        if self.fileType in self.config['allowFiles']:
            return True
        else:
            return False

    def getFullName(self):
        now = datetime.now()
        randint = random.randint(100000, 999999)
        format = self.config['pathFormat']
        format = format.replace("{yyyy}", now.strftime("%Y"))
        format = format.replace("{mm}", now.strftime("%m"))
        format = format.replace("{dd}", now.strftime("%d"))
        format = format.replace("{time}", now.strftime("%H%M%S"))
        format = format.replace("{rand:6}", str(randint))

        ext = self.oriName[self.oriName.rfind("."):]
        self.fileName = "%s%s%s" % (now.strftime("%H%M%S"), randint, ext)
        return format + ext

    def getFilePath(self):
        fullpath = os.path.join(basedir, self.fullName)
        return fullpath

    def uploadFile(self, upfile):
        result = {'state': '', 'url': '', 'title': '', 'original': ''}

        if not upfile or len(upfile) == 0:
            result['state'] = self.getStateInfo('ERROR_FILE_NOT_UPLOAD')
            return result

        self.oriName = upfile[0]['filename']
        self.fileType = self.oriName[self.oriName.rfind('.'):]
        data = upfile[0]['body']
        self.fileSize = len(data)

        if self.fileSize == 0:
            result['state'] = self.getStateInfo('ERROR_FILE_NULL')
            return result

        if not self.checkSize():
            result['state'] = self.getStateInfo('ERROR_SIZE_EXCEED')
            return result

        if not self.checkType():
            result['state'] = self.getStateInfo('ERROR_TYPE_NOT_ALLOWED')
            return result

        self.fullName = self.getFullName()
        self.filePath = self.getFilePath()

        dirname = os.path.dirname(self.filePath)
        if not os.path.exists(dirname):
            try:
                os.makedirs(dirname)
            except Exception as e:
                result['state'] = self.getStateInfo('ERROR_CREATE_DIR')
                return result

        if not os.access(dirname, os.R_OK | os.W_OK):
            try:
                os.chmod(dirname, stat.S_IREAD | stat.S_IWRITE)
            except Exception as e:
                result['state'] = self.getStateInfo('ERROR_DIR_NOT_WRITEABLE')
                return result

        try:
            fp = open(self.filePath, 'wb')
            fp.write(data)
            fp.close()
        except Exception as e:
            result['state'] = self.getStateInfo('ERROR_FILE_SAVE')
            return result

        result['state'] = self.stateMap['SUCCESS']
        result['url'] = self.fullName
        result['title'] = self.fileName
        result['original'] = self.oriName
        return result

    def getFileList(self, start, size):
        result = {'state': '', 'list': [], 'start': 0, 'total': 0}
        path = self.config['path']
        listSize = self.config['listSize']

        listfiles = []
        for root, dirs, files in os.walk(path):
            for file in files:
                self.fileType = file[file.rfind('.'):]
                if self.checkType():
                    url = root + '/' + file
                    listfiles.append({'url': '%s' % url})

        if size > listSize:
            num = listSize
        else:
            num = size

        listfiles.sort()
        lists = listfiles[start:(start + num)]

        result['state'] = self.stateMap['SUCCESS']
        result['list'] = lists
        result['start'] = start
        result['total'] = len(listfiles)
        return result

class UploadHandler(RequestHandler):
    def get(self):
        action = self.get_argument('action')
        upload = Upload()
        result = {}
        if action == "config":
            fp = open("static/ueditor/config.json", 'r')
            config = json.loads(fp.read())
            fp.close()
            result = config

        if action == "listimage":
            start = self.get_argument('start')
            size = self.get_argument('size')

            upload.config['path'] = upload.getItem('imageManagerListPath')
            upload.config['listSize'] = upload.getItem('imageManagerListSize')
            upload.config['allowFiles'] = upload.getItem('imageManagerAllowFiles')

            result = upload.getFileList(int(start), int(size))

        if action == "listfile":
            start = self.get_argument('start')
            size = self.get_argument('size')

            upload.config['path'] = upload.getItem('fileManagerListPath')
            upload.config['listSize'] = upload.getItem('fileManagerListSize')
            upload.config['allowFiles'] = upload.getItem('fileManagerAllowFiles')

            result = upload.getFileList(int(start), int(size))

        self.write(result)

    def post(self):
        action = self.get_argument('action')
        upload = Upload()
        result = {}

        if action == "uploadimage":
            fieldName = upload.getItem('imageFieldName')
            upload.config['pathFormat'] = upload.getItem('imagePathFormat')
            upload.config['maxSize'] = upload.getItem('imageMaxSize')
            upload.config['allowFiles'] = upload.getItem('imageAllowFiles')

            upfile = self.request.files[fieldName]
            result = upload.uploadFile(upfile)

        if action == "uploadfile":
            fieldName = upload.getItem('fileFieldName')
            upload.config['pathFormat'] = upload.getItem('filePathFormat')
            upload.config['maxSize'] = upload.getItem('fileMaxSize')
            upload.config['allowFiles'] = upload.getItem('fileAllowFiles')

            upfile = self.request.files[fieldName]
            result = upload.uploadFile(upfile)

        if action == "uploadvideo":
            fieldName = upload.getItem('videoFieldName')
            upload.config['pathFormat'] = upload.getItem('videoPathFormat')
            upload.config['maxSize'] = upload.getItem('videoMaxSize')
            upload.config['allowFiles'] = upload.getItem('videoAllowFiles')

            upfile = self.request.files[fieldName]
            result = upload.uploadFile(upfile)

        if action == "uploadscrawl":
            upload.config['pathFormat'] = upload.getItem('scrawlPathFormat')
            upload.config['maxSize'] = upload.getItem('scrawlMaxSize')
            upload.config['allowFiles'] = ['.png']

            data = self.request.body_arguments
            upfile = []
            upfile.append({'filename': 'scrawl.png', 'body': base64.b64decode(data['upfile'][0])})
            result = upload.uploadFile(upfile)

        self.write(result)

def main():
    settings = {
        "autoreload": True,
        "debug": True,
        "static_path": os.path.join(basedir, "static"),
        "template_path": os.path.join(basedir, "templates")
    }
    app = Application(
        [
            (r"/", IndexHandler),
            (r"/upload", UploadHandler)
        ],
        **settings
    )

    http_server = tornado.httpserver.HTTPServer(app)
    http_server.listen(options.port)
    tornado.ioloop.IOLoop.current().start()

if __name__ == '__main__':
    main()

转载于:https://blog.51cto.com/lang8027/2045136

weixin_34121282
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Tornado---使用Ueditor的一些操作
qq_34802511的博客
02-28 257
准备工作： 一、Tornado文档链接：http://tornado-zh.readthedocs.io/zh/latest/ 二、UEditor 下载地址：https://ueditor.baidu.com/website/download.html https://ueditor.baidu.com/build/b...
Tornado 配置EditPlus编辑器
thinkpadlove的专栏
07-25 1520
Tornado的编辑器太简陋了，我们周围又有那么多可以使用的功能强大的编辑器，比如UE，Source Insight，Vi，EditPlus等等，那么我们能不能把这些编辑器集成到Tornado中去呢？ 下面我们就以EditPlus为例进行说明，首先我们在Tornado菜单中的Tools－>Options中选择External Editor标签页，在command中输入下面的命令：D:\Progr
Tornado使用Ueditor的一些操作
wx217415的博客
04-12 2097
Tornado使用Ueditor的一些操作 Tornado简介 UEditor简介 在Tornado项目中集成UEditor 后台请求的实现 验证 参考文献Tornado使用Ueditor的一些操作本文介绍如何使用Tornado框架来集成百度的富文本编辑框架Ueditor： 感谢 problc 、 digwtx 大神的博客指导Tornado简介 Tornado是一个用Python写的相对简单
如何在Tornado中配置外部编辑器
Minico's blog
09-07 2234
用过Tornado的人都知道，它的编辑器是在是太简陋了，而我们周围又有那么多可以使用的功能强大的编辑器，比如UE，Source Insight，Vi等等，那么我们能不能把这些编辑器集成到Tornado中去呢？当然可以了，要不然我写这个干嘛呢：）下面我们就以Source Insight为例进行说明，首先我们在Tornado菜单中的Tools－>Options中选择External Editor标签页
Python开源项目合集（网页框架）
huang714的专栏
04-03 1926
Django Django - Django。 项目地址：https://www.djangoproject.com/ Channels - Channels旨在增强Django的异步能力，同时让Django不仅仅局限于Request-Response模型，能够支持WebSocket、HTTP2推送和背景任务。 项目地址：https://github.com/andrewgodwin/ch...
Python-《转载-Github上的python开源项目》
CSDN博客
04-22 4071
Python开源项目，期待大家和我们一起共同维护 github排名榜单https://github.com/trending github搜索榜单：https://github.com/search 说明 以下总结大部分来至于 [TimLiu-Python] (https://github.com/Tim9Liu9/TimLiu-Python) ，欢迎大家查看原版 Feedback 期...
《转载-Github上的python开源项目》
weixin_43564373的博客
11-13 7849
Python开源项目，期待大家和我们一起共同维护 github排名榜单 https://github.com/trending github搜索榜单：https://github.com/search 说明 以下总结大部分来至于 [TimLiu-Python] (https://github.com/Tim9Liu9/TimLiu-Python) ，欢迎大家查看原版 Feedback 期...
PHP集成百度Ueditor 1.4.3
10-25
我们在做项目的时候经常要遇到编辑器问题，就目前来看百度编辑器还是首选，今天我们就来看下如何在php中集成百度Ueditor,有相同需要的小伙伴参考下吧
ASP.NET中集成百度编辑器UEditor
10-24
本文给大家讲解的是如何在ASP.NET中集成百度编辑器UEditor的方法和具体的步奏，十分的详细，有需要的小伙伴可以参考下。
spring boot thymeleaf 整合 百度Ueditor 集成demo
08-10
在本文中，我们将深入探讨如何将Spring Boot、Thymeleaf和百度Ueditor进行整合，以便在Web应用程序中实现一个功能强大的富文本编辑器。这个集成的Demo将帮助开发者解决后端配置问题，确保文件上传功能正常运行。 ...
百度富文本框（Ueditor）自定义上传接口，并解决单图片上传的跨域问题
03-09
总之，自定义百度富文本框Ueditor的上传接口并解决跨域问题，主要涉及后端接口的设置、响应头的配置、Ueditor的配置修改以及前端的交互优化。通过这些步骤，我们可以让Ueditor在跨域环境下也能流畅地进行图片上传。
在python web.py中使用百度富文本编辑器 UEditor
miracle的专栏
02-13 1万+
UEditor官方没有支持python的版本，有人改了个python的django版本，但是没找到web.py的。 于是参考php版本，实现了一下web.py集成UEditor，包含了文件上传，图片上传，视频上传，图片远程抓取，涂鸦等。 可能会有一些session之类的没有处理。 Demo代码可以在https://github.com/meizhitu/100programhomework/
百度富文本编辑器ueditor使用总结
热门推荐
wusuopuBUPT的专栏
10-25 5万+
最近做的项目用到了ueditor这个东东，但是他的一些配置文档对初次使用者来说很难以理解，故作此总结 1.ueditor 官方地址：http://ueditor.baidu.com/website/index.html    开发文档地址：http://ueditor.baidu.com/website/document.html    下载地址：http://ueditor.bai
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 456
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
Nginx 怎样处理请求的重试机制？
最新发布
技术笔记
07-22 926
Nginx 的重试机制就像是网络世界中的一道坚固防线，它在请求遇到挫折时挺身而出，为请求的成功送达保驾护航。通过合理的配置和优化，我们可以让 Nginx 的重试机制更好地适应各种复杂的网络环境和业务需求，为用户提供更加稳定、可靠的服务。就如同在人生的道路上，我们难免会遇到挫折和失败，但只要我们不放弃，不断尝试，总会迎来成功的曙光。Nginx 的重试机制也是如此，它在网络的海洋中不断探索、重试，只为将每一个请求安全、准确地送达目的地。🎉相关推荐🍅关注博主🎗️带你畅游技术世界，不错过每一次成长机会！
el-upload 上传图片转成base64 字符串，传给后端，且base64在页面的展示
bigdargon的博客
07-22 283
【代码】el-upload 上传图片转成base64 字符串，传给后端，且base64在页面的展示。
Selenium 百度ueditor
10-25
而百度ueditor是一款富文本编辑器，可以用于网站的文本编辑。在使用Selenium进行自动化测试时，可以通过Selenium来操作ueditor进行文本输入等操作。根据提供的引用内容，可以看出在Selenium中操作ueditor有两种方式...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值