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"]
}
ueconfig.json
注意修改几处关键路径信息:
"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 importserve
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 importHttpResponseimportcodecsimportjsonimportosfrom django.views.decorators.csrf importcsrf_exemptimportrandomfrom datetime import *
from BJJT.settings importBASE_DIR
ROOT=BASE_DIR#本地上传图片时构造json返回值
classJsonResult(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
defbuildJsonResult(result):
jsondata= {"state": result.state, "url": result.url, "title": result.title, "original": result.original,"error": result.error}returnjson.dumps(jsondata)defbuildFileName(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文件
defgetConfigContent():#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)returncontent#上传配置类
classUploadConfig(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配置中的某属性值
defGetConfigValue(key):
config=getConfigContent()returnconfig[key]#检查文件扩展名是否在允许的扩展名内
defCheckFileType(filename, AllowExtensions):
exts=list(AllowExtensions)
name, ext=os.path.splitext(filename)return ext inextsdefCheckFileSize(filesize, SizeLimit):return filesize
@csrf_exemptdefuploadFile(request, config):
result=JsonResult()ifconfig.Base64:pass
else:
buf=request.FILES.get(config.UploadFieldName)
filename=buf.nameif notCheckFileType(filename, config.AllowExtensions):
result.error= u"不允许的文件格式"
returnHttpResponse(buildJsonResult(result))if notCheckFileSize(buf.size, config.SizeLimit):
result.error= u"文件大小超出服务器限制"
returnHttpResponse(buildJsonResult(result))try:
truelyName=buildFileName(filename)
webUrl= config.SavePath +truelyName
savePath= ROOT +webUrl
with open(savePath,"wb") as f:for chunk inbuf:
f.write(chunk)
result.state= "SUCCESS"result.url=truelyName
result.title=truelyName
result.original=truelyName
response=HttpResponse(buildJsonResult(result))
response["Content-Type"] = "text/plain"
returnresponseexceptException as e:print(e)
result.error= u"网络错误"
returnHttpResponse(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}
deflistFileManage(request, imageManagerListPath, imageManagerAllowFiles, listsize):
pstart= request.GET.get("start")
start= pstart == None and int(pstart) or0
psize= request.GET.get("size")
size= psize == None and int(GetConfigValue(listsize)) orint(psize)
localPath= ROOT +imageManagerListPath
filelist=[]
exts=list(imageManagerAllowFiles)
index=startfor imagename inos.listdir(localPath):
name, ext=os.path.splitext(imagename)if ext inexts:
filelist.append(dict(url=imagename))
index+= 1
if index - start >=size:breakjsondata= {"state": "SUCCESS", "list": filelist, "start": start, "size": size, "total": index}returnHttpResponse(json.dumps(jsondata))#返回配置信息
defconfigHandler(request):
content=getConfigContent()
callback= request.GET.get("callback")ifcallback:return HttpResponse("{0}{1}".format(callback, json.dumps(content)))returnHttpResponse(json.dumps(content))#图片上传控制
@csrf_exemptdefuploadimageHandler(request):
AllowExtensions= GetConfigValue("imageAllowFiles")
PathFormat= GetConfigValue("imagePathFormat")
SizeLimit= GetConfigValue("imageMaxSize")
UploadFieldName= GetConfigValue("imageFieldName")
SavePath= GetConfigValue("imageUrlPrefix")
upconfig= UploadConfig(PathFormat, UploadFieldName, SizeLimit, AllowExtensions, SavePath, False, '')returnuploadFile(request, upconfig)defuploadvideoHandler(request):
AllowExtensions= GetConfigValue("videoAllowFiles")
PathFormat= GetConfigValue("videoPathFormat")
SizeLimit= GetConfigValue("videoMaxSize")
UploadFieldName= GetConfigValue("videoFieldName")
SavePath= GetConfigValue("videoUrlPrefix")
upconfig= UploadConfig(PathFormat, UploadFieldName, SizeLimit, AllowExtensions, SavePath, False, '')returnuploadFile(request, upconfig)defuploadfileHandler(request):
AllowExtensions= GetConfigValue("fileAllowFiles")
PathFormat= GetConfigValue("filePathFormat")
SizeLimit= GetConfigValue("fileMaxSize")
UploadFieldName= GetConfigValue("fileFieldName")
SavePath= GetConfigValue("fileUrlPrefix")
upconfig= UploadConfig(PathFormat, UploadFieldName, SizeLimit, AllowExtensions, SavePath, False, '')returnuploadFile(request, upconfig)#在线图片
deflistimageHandler(request):
imageManagerListPath= GetConfigValue("imageManagerListPath")
imageManagerAllowFiles= GetConfigValue("imageManagerAllowFiles")
imagelistsize= GetConfigValue("imageManagerListSize")returnlistFileManage(request, imageManagerListPath, imageManagerAllowFiles, imagelistsize)#在线文件
defListFileManagerHander(request):
fileManagerListPath= GetConfigValue("fileManagerListPath")
fileManagerAllowFiles= GetConfigValue("fileManagerAllowFiles")
filelistsize= GetConfigValue("fileManagerListSize")returnlistFileManage(request, fileManagerListPath, fileManagerAllowFiles, filelistsize)
actions={"config": configHandler,"uploadimage": uploadimageHandler,"uploadvideo": uploadvideoHandler,"uploadfile": uploadfileHandler,"listimage": listimageHandler,"listfile": ListFileManagerHander
}
@csrf_exemptdefhandler(request):
action= request.GET.get("action")return actions.get(action)(request)
View Code
配置此试图函数的路由,我是在应用下的url中设置的路由,这个根据自己的实际路径进行配置:
from admin.views.controller import *path(r'ueEditorControler', handler)
六、配置工作最后一步,将”ueditor.config.js”文件的
, serverUrl: URL + "/net/controller.ashx"
修改为
, serverUrl: "/ueEditorControler"
主要就是在uediter.config.js中出发的请求这个视图函数,调用相应的后台
配置完成!
接下来是在js中使用编辑器:
var ue = UE.getEditor('detail', {
toolbars: [
[//'fullscreen',
//'source',
'bold','underline', //下划线
'italic', //斜体
'insertorderedlist', //有序列表
'insertunorderedlist', //无序列表
'|','indent', //首行缩进
'justifyleft', //居左对齐
'justifyright', //居右对齐
'justifycenter', //居中对齐
'justifyjustify', //两端对齐
'|','simpleupload', //单图上传
//'insertimage', //多图上传
//'map', //Baidu地图
'link', //超链接
'|','preview', //预览
'undo','redo']
],});
完成!
如果觉得此文档帮助了你,支持一下啊啊啊啊啊啊啊!