python编辑器 in out_python3、Django中使用Uediter百度富文本编辑器的配置方法

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']

],});

完成！

如果觉得此文档帮助了你，支持一下啊啊啊啊啊啊啊！