python3Django中使用Uediter百度富文本编辑器的配置方法
Posted 进击的星星
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了python3Django中使用Uediter百度富文本编辑器的配置方法相关的知识，希望对你有一定的参考价值。
环境：Django==2.0.2
python == 3.7.3
为什么要说明环境？因为python3.7后会有路由配置， 文件读取等问题
首先从ueEditor官网下载最新版本的包，目前官网上提供了ASP、.NET、PHP、JSP版本的，django版本只有一个第三方个人开发的，但看上出配置起来稍微复杂一点.
目前相对复杂的的就是文件图片上传的配置问题，接下来主要说明此问题，先看几个文件作用：
ueditor.all.js --- ueditor的入口，用于初始化插件等作用
ueditor.config.js --- ueditor完整配置项
controller.jsp ---- 相当于是一个action方法，用于请求返回config.json 文件，这个主要就是文件上传的控制后台，与其他语言的区别也就是在此，主要重写此文件。
config.json ----- 上传等功能都是在这个文件里配置
uEditor与后台交互的逻辑：
1.编辑器初始化时，异步请求后台处理页面，处理程序应该返回一套json格式的配置信息，请求地址携带的参数为action=config
2.点击图片上传按钮，异步请求后台处理页面，请求地址携带参数为action=uploadimage
3.点击视频上传按钮，异步请求后台处理页面，请求地址携带参数为action=uploadvideo
4.点击附件上传按钮，异步请求后台处理页面，请求地址携带参数为action=uploadfile
5.点击多图上传中的在线图片选项卡，异步请求后台处理页面，请求地址携带参数为action=listimage
6.点击附件上传的在线文件选项卡，异步请求后台处理页面，请求地址携带参数为action=listfile
7.点击涂鸦按钮后，异步请求后台处理页面，请求地址携带参数为action=uploadscrawl
主要步骤：
一、下载uediter，我这里下载的是php版本的，将其放置在项目的某一位置，我这里放在/static/js/base/plugins/下，并在项目下的url.py中配置uediter所在目录的静态文件路径：
from django.views.static import serve
path(\'ue/(?P.*)\', serve, {\'document_root\': os.path.dirname(__file__).replace(\'\\\\\', \'/\') + "/static/js/base/plugins/uediter"}), # uediter
二、在根目录下新建ueconfig.json文件，配置以下信息：
{"imageActionName": "uploadimage",
"imageFieldName": "upfile",
"imageMaxSize": 2048000,
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"imageCompressEnable": true,
"imageCompressBorder": 1600,
"imageInsertAlign": "none",
"imageUrlPrefix": "/static/upload/image/",
"imagePathFormat": "image/{yyyy}{mm}{dd}/{time}{rand:6}",
"scrawlActionName": "uploadscrawl",
"scrawlFieldName": "upfile",
"scrawlPathFormat": "/images/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"scrawlMaxSize": 2048000,
"scrawlUrlPrefix": "/static/upload/image/",
"scrawlInsertAlign": "none",
"snapscreenActionName": "uploadimage",
"snapscreenPathFormat": "/images/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"snapscreenUrlPrefix": "//static/upload/image/",
"snapscreenInsertAlign": "none",
"catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],
"catcherActionName": "catchimage",
"catcherFieldName": "source",
"catcherPathFormat": "/images/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}",
"catcherUrlPrefix": "/static/upload/image/",
"catcherMaxSize": 2048000,
"catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"videoActionName": "uploadvideo",
"videoFieldName": "upfile",
"videoPathFormat": "upload/video/{yyyy}{mm}{dd}/{time}{rand:6}",
"videoUrlPrefix": "/static/upload/image/",
"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": "file/{yyyy}{mm}{dd}/{time}{rand:6}",
"fileUrlPrefix": "/static/upload/image/",
"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": "/upload/onlineimages/",
"imageManagerListSize": 20,
"imageManagerUrlPrefix": "/static/upload/image/",
"imageManagerInsertAlign": "none",
"imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"],
"fileManagerActionName": "listfile",
"fileManagerListPath": "/upload/onlinefiles/",
"fileManagerUrlPrefix": "/static/upload/image/",
"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"
]
}
注意修改几处关键路径信息：
"imageUrlPrefix": "/upload/images/"修改为自己项目中图片上传后保存的位置，demo中是/upload/images/这个目录 "scrawlUrlPrefix": "/upload/images/", 修改为自己项目中涂鸦 "snapscreenUrlPrefix": "/upload/images/", 截图保存位置 "catcherUrlPrefix": "/upload/images/", 网络图片保存位置 "videoUrlPrefix": "/upload/vedio/" 视频文件保存地址 "fileUrlPrefix": "/upload/files/" 附件保存地址 "imageManagerUrlPrefix": "/upload/onlineimages/", 在线图片所在位置，在线图片实际就是服务器为用户提供的可选图片 "fileManagerUrlPrefix": "/upload/onlinefiles/" 在线附件所在位置，在线附件实际就是服务器为用户提供的可选附件
三、设置上面的ueconfig.json文件的所在目录的静态路径，在项目下的url.py中：
from django.views.static import serve path(\'upload/(?P.*)\', serve, {\'document_root\': (os.path.dirname(__file__)+"/static/upload").replace(\'\\\\\',\'/\') }), # 上传文件
四、需要确保ueconfig.json中的路径文件存在，images、vedio、 files、onlinefiles、onlineimages几个子目录
五、设置controller.py文件，这个文件主要是加载uediter的时候，异步请求视图函数
# -*- coding:utf-8 -*- from django.http import HttpResponse import codecs import json import os from django.views.decorators.csrf import csrf_exempt import random from datetime import * from BJJT.settings import BASE_DIR ROOT = BASE_DIR # 本地上传图片时构造json返回值 class JsonResult(object): def __init__(self, state="未知错误", url="", title="", original="", error="null"): super(JsonResult, self).__init__() self.state = state self.url = url self.title = title self.original = original self.error = error # 构造返回json def buildJsonResult(result): jsondata = {"state": result.state, "url": result.url, "title": result.title, "original": result.original, "error": result.error} return json.dumps(jsondata) def buildFileName(filename): dt = datetime.now() name, ext = os.path.splitext(filename) return dt.strftime("%Y%m%d%M%H%S{0}{1}".format(random.randint(1, 999999), ext)) # 读取json文件 def getConfigContent(): # jsonfile = file(ROOT + "/ueconfig.json") jsonfile = os.path.join(ROOT + "/BJJT/ueconfig.json") with open(jsonfile, \'r\', encoding=\'utf8\') as f: content = json.load(f) return content # 上传配置类 class UploadConfig(object): def __init__(self, PathFormat, UploadFieldName, SizeLimit, AllowExtensions, SavePath, Base64, Base64Filename): super(UploadConfig, self).__init__() self.PathFormat = PathFormat self.UploadFieldName = UploadFieldName self.SizeLimit = SizeLimit self.AllowExtensions = AllowExtensions self.SavePath = SavePath self.Base64 = Base64 self.Base64Filename = Base64Filename # 获取json配置中的某属性值 def GetConfigValue(key): config = getConfigContent() return config[key] # 检查文件扩展名是否在允许的扩展名内 def CheckFileType(filename, AllowExtensions): exts = list(AllowExtensions) name, ext = os.path.splitext(filename) return ext in exts def CheckFileSize(filesize, SizeLimit): return filesize < SizeLimit # 处理上传图片、文件、视频文件 @csrf_exempt def uploadFile(request, config): result = JsonResult() if config.Base64: pass else: buf = request.FILES.get(config.UploadFieldName) filename = buf.name if not CheckFileType(filename, config.AllowExtensions): result.error = u"不允许的文件格式" return HttpResponse(buildJsonResult(result)) if not CheckFileSize(buf.size, config.SizeLimit): result.error = u"文件大小超出服务器限制" return HttpResponse(buildJsonResult(result)) try: truelyName = buildFileName(filename) webUrl = config.SavePath + truelyName savePath = ROOT + webUrl with open(savePath, "wb") as f: for chunk in buf: f.write(chunk) result.state = "SUCCESS" result.url = truelyName result.title = truelyName result.original = truelyName response = HttpResponse(buildJsonResult(result)) response["Content-Type"] = "text/plain" return response except Exception as e: print(e) result.error = u"网络错误" return HttpResponse(buildJsonResult(result)) # 处理在线图片与在线文件 # 返回的数据格式：{"state":"SUCCESS","list":[{"url":"upload/image/20140627/6353948647502438222009315.png"},{"url":"upload/image/20140627/6353948659383617789875352.png"},{"url":"upload/image/20140701/6353980733328090063690725.png"},{"url":"upload/image/20140701/6353980745691597223366891.png"},{"url":"upload/image/20140701/6353980747586705613811538.png"},{"url":"upload/image/20140701/6353980823509548151892908.png"}],"start":0,"size":20,"total":6} def listFileManage(request, imageManagerListPath, imageManagerAllowFiles, listsize): pstart = request.GET.get("start") start = pstart == None and int(pstart) or 0 psize = request.GET.get("size") size = psize == None and int(GetConfigValue(listsize)) or int(psize) localPath = ROOT + imageManagerListPath filelist = [] exts = list(imageManagerAllowFiles) index = start for imagename in os.listdir(localPath): name, ext = os.path.splitext(imagename) if ext in exts: filelist.append(dict(url=imagename)) index += 1 if index - start >= size: break jsondata = {"state": "SUCCESS", "list": filelist, "start": start, "size": size, "total": index} return HttpResponse(json.dumps(jsondata)) # 返回配置信息 def configHandler(request): content = getConfigContent() callback = request.GET.get("callback") if callback: return HttpResponse("{0}{1}".format(callback, json.dumps(content))) return HttpResponse(json.dumps(content)) # 图片上传控制 @csrf_exempt def uploadimageHandler(request): AllowExtensions = GetConfigValue("imageAllowFiles") PathFormat = GetConfigValue("imagePathFormat") SizeLimit = GetConfigValue("imageMaxSize") UploadFieldName = GetConfigValue("imageFieldName") SavePath = GetConfigValue("imageUrlPrefix") upconfig = UploadConfig(PathFormat, UploadFieldName, SizeLimit, AllowExtensions, SavePath, False, \'\') return uploadFile(request, upconfig) def uploadvideoHandler(request): AllowExtensions = GetConfigValue("videoAllowFiles") PathFormat = GetConfigValue("videoPathFormat") SizeLimit = GetConfigValue("videoMaxSize") UploadFieldName = GetConfigValue("videoFieldName") SavePath = GetConfigValue("videoUrlPrefix") upconfig = UploadConfig(PathFormat, UploadFieldName, SizeLimit, AllowExtensions, SavePath, False, \'\') return uploadFile(request, upconfig) def uploadfileHandler(request): AllowExtensions = GetConfigValue("fileAllowFiles") PathFormat = GetConfigValue("filePathFormat") SizeLimit = GetConfigValue("fileMaxSize") UploadFieldName = GetConfigValue("fileFieldName[js]使用百度编辑器uediter时遇到的一些问题（span，div等被过滤）Python selenium 测试卡在 urlopen 中