首先从 ueEditor官网 下载最新版本的包,目前官网上提供了ASP、.NET、PHP、JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点。
这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方。
这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自己开发实现。
其实,uEditord的绝大部分功能在django中都是可用的,只有上传文件、图片、视频、在线图片、在线文件这一部分和上传有关系的部分不好用,因为这些功能需要后台处理程序的支持才可以,所以,我们自己要做的,就是用python实现这部分的处理逻辑。
uEditor与后台交互的逻辑:
1.编辑器初始化时,异步请求后台处理页面,处理程序应该返回一套json格式的配置信息,请求地址携带的参数为action=config
2.点击图片上传按钮,异步请求后台处理页面,请求地址携带参数为action=uploadimage
3.点击视频上传按钮,异步请求后台处理页面,请求地址携带参数为action=uploadvideo
4.点击附件上传按钮,异步请求后台处理页面,请求地址携带参数为action=uploadfile
5.点击多图上传中的在线图片选项卡,异步请求后台处理页面,请求地址携带参数为action=listimage
6.点击附件上传的在线文件选项卡,异步请求后台处理页面,请求地址携带参数为action=listfile
7.点击涂鸦按钮后,异步请求后台处理页面,请求地址携带参数为action=uploadscrawl
我们要实现的就是,根据每次请求的不同参数值,调用不同的方法进行处理,如下图所示,controller根据参数值,调用对应的处理程序进行处理:
处理逻辑其实很简单,就是将Request请求中的文件内容读取并写入到服务器上,然后构造特定的json返回值。
上传文件、图片、视频时,json格式如下:
{ "url": "20140703491416521462.png", "state": "SUCCESS", "error": "null", "original": "20140703491416521462.png", "title": "20140703491416521462.png"}
其中,url是文件在服务器的相对地址,这个地址会和json配置信息中的”xxxUrlPrefix”的值拼在一起,显示出来。
state是状态信息,成功的返回信息固定为SUCCESS,异常情况可自己定义。
error:异常信息,正常的话,为null
original:内部文件名,一般和titile相同。
title:文件名称。
在线文件、在线图片,json格式如下:
{ "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}
新闻热点
疑难解答