ueditor在flask中的使用技巧

ueditor是百度前端团队开发的一款功能比较齐全的富文本编辑器,正好项目中需要,参考了一些别人写的例子和官方文档完成了上传功能后台程序的编写:

  • 上传照片/截屏
  • 上传附件
  • 上传涂鸦
  • 上传视频

首先需要的ueditor的config进行配置(具体可参考官方文档):

# 初始化时,返回配置文件给客户端
            result = {"imageActionName": "uploadimage", # 自定义get的名字
                      "snapscreenActionName": "uploadimage",
                      "fileActionName": "uploadfile",
                      "videoActionName": "uploadvideo",
                      "scrawlActionName": "uploadscrawl",
                      "imageFieldName": "upfile",# 定义request名字
                      "fileFieldName": "upfile",
                      "videoFieldName": "upfile",
                      "scrawlFieldName": "upfile",
                      "snapscreenFieldName": "upfile",
                      "imageMaxSize": 2048000,# 定义文件的最大尺寸
                      "fileMaxSize": 51200000,
                      "videoMaxSize": 51200000,
                      "scrawlMaxSize": 2048000,
                      "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif"], # 定义上传文件的格式

                      "fileAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp", ".html",
                                         ".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", ".csv",
                                         ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md",
                                         ".xml"],
                      "videoAllowFiles": [".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg", ".ogg",
                                          ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"
                                          ],
                      "imageCompressEnable": True,
                      "imageCompressBorder": 1600,
                      "imageInsertAlign": "none",
                      "snapscreenInsertAlign": "none",
                      "imageUrlPrefix": "",
                      "snapscreenUrlPrefix": "",
                      "fileUrlPrefix": "",
                      "videoUrlPrefix": "",
                      "scrawlUrlPrefix": "",
                      "imagePathFormat": "",
                      "filePathFormat": "",
                      "videoPathFormat": ""
                      }

然后是对从前台接收的数据进行保存并返回对应的json

# 涂鸦处理
def upload_scrawl():
    data = base64.b64decode(request.form['upfile'])# 由于涂鸦返回的数据是base64,所以需要使用Python内置的函数base64进行解码
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + '.png'# 制作文件名
    open(r"static/upload/scrawl/{}".format(filename), 'wb').write(data) # 将文件存入static/upload/scrawl目录下,这里需要注意解码后的文件为bytes所以要用'wb'
    # 返回需要的json数据
    return {"state": "SUCCESS",
            "url": "/upload/scrawl/{}/".format(filename),
            "title": filename,
            "original": filename,
            }


# 上传视频处理
def upload_video():
    file_storage = request.files['upfile']
    name, extension = os.path.splitext(file_storage.filename) # 将文件剥离成name = xxxxxx extension = .xxx
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + extension # 获取的经过格式化的文件名
    file_path = os.path.join(r"static/upload/video/", filename)
    file_storage.save(file_path)
    return {"state": "SUCCESS",
            "url": file_path.replace('static/', '/'),
            "title": file_storage.filename,
            "original": file_storage.filename,
            }


# 上传文件处理
def upload_file():
    file_storage = request.files['upfile']
    name, extension = os.path.splitext(file_storage.filename)
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + extension
    file_path = os.path.join(r"static/upload/file/", filename)
    file_storage.save(file_path)
    return {"state": "SUCCESS",
            "url": file_path.replace('static/', '/'),
            "title": file_storage.filename,
            "original": file_storage.filename
            }


# 上传照片包含截屏处理
def upload_image():
    file_storage = request.files['upfile']
    name, extension = os.path.splitext(file_storage.filename)
    name = datetime.now().strftime('%Y%m%d%H%M%S')
    filename = name + extension
    file_path = os.path.join(r"static/upload/image/", filename)
    file_storage.save(file_path)
    return {"state": "SUCCESS",
            "url": file_path.replace('static/', '/'),
            "title": file_storage.filename,
            "original": file_storage.filename,
            "type": extension,
            "size": ""}

 

具体demo可以去我的git上看https://git.oschina.net/hehahutu/myblog.git

转载于:https://my.oschina.net/u/3115081/blog/803405

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点。Ueditor基于BSD开源协议,除了具有代码精简、加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制。 Ueditor编辑器划分为了三层架构。其,核心层为开发者提供了诸如range、selection、domUtils类的底层API接口,间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可以提供自由定制的用户交互界面。Ueditor开源编辑器这种拥有可配性的模式,令开发者能够根据自身需要接入任何一层进行开发。 百度编辑器 v1.4.3 更新日志: 修复hasContents接口在非ie下只有空格时判断还为真的问题 修复在粘贴word内容时,会误命cm,pt这样的文本内容变成px的问题 优化删除编辑器再创建编辑器时,编辑器的容器id发生变化的问题 修复提交jsonp请求时,callback参数的xss漏洞 新增jsp后台多种服务器配置下的路径定位 修复ZeroClipboard的flash地址参数名称错误 修复getActionUrl的bug 整理配置参数,把遗漏在代码的配置项整理到ueditor.config.js里 修复图片拉伸工具和编辑拉伸长高器的样式冲突 修复文字的unicode编码会被错误再次解析问题 添加消息提示功能,冒泡提示信息 优化上传功能提示,当后端配置项没正常加载,禁用上传功能 修复单图上传按钮和jqueryValidate不兼容的问题 简化了与jqueryValidate的结合操作,具体看_examples/jqueryValidateDemo.html 修复在删除编辑器后,再次创建时丢失原有id的问题 修复查找替换在一些块节点会导致替换错误
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值