Django集成百度富文本编辑器uEditor攻略
来源:互联网 发布:db2数据库百度百科 编辑:程序博客网 时间:2024/06/02 23:21
首先从 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是文件在服务器的相对地址,这个地址会和json配置信息中的”xxxUrlPrefix”的值拼在一起,显示出来。
state是状态信息,成功的返回信息固定为SUCCESS,异常情况可自己定义。
error:异常信息,正常的话,为null
original:内部文件名,一般和titile相同。
title:文件名称。
在线文件、在线图片,json格式如下:
其中,start,是标志从第几张图片开始,个人感觉意义不大。
size:默认显示多少个文件、图片。
total:图片、文件总数量。
list:以数组形式列出图片、文件的相对地址。
这里,我实现了一个简单demo,可以实现文件、图片、视频的上传及在线图片、在线文件的功能。点击 这里 下载代码源码。
目前支持功能:
基本文字、排版等功能
图片上传、文件上传、视频上传功能
在线文件、在线图片功能
未实现功能:
涂鸦功能
网络图片功能
功能已在CentOS下,部署到nginx下,实测,可用。
使用方法: -----
1. 下载这里的完整代码,直接cd到根目录,运行
,可直接查看效果演示。
2. 在urls.py中将uEditor所在目录配置成静态文件路径,本demo中为UE
3. 将demo中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/" 在线附件所在位置,在线附件实际就是服务器为用户提供的可选附件
4. json文件修改后,要把上面设置的路径设置为静态资源目录,例如demo中全部保存到/upload/的子目录下,那么在urls.py中配置如下:
之后,确保子目录是存在的,为了方便,程序里没有自动创建目录的方法,需要手工创建,例如demo中创建了images、vedio、 files、onlinefiles、onlineimages几个子目录
5. 将demo中的controller.py文件拷贝到项目中任意位置,其实controller就是一个异步处理的视图,拷贝完成后,在urls.py中配置相应的路由,demo中放到了根目录,所以配置如下:
自己的项目中只需要将
改为
即可
6. 配置工作最后一步,将”ueditor.config.js”文件的
修改为
即上一步配置的url路由
至此,配置工作完成,剩下的就是到页面上引用uEditor了,下面是一个简单的html页面,可根据uEditor放置位置调整脚本 和样式的引用路径
- Django集成百度富文本编辑器uEditor攻略
- django 与 百度 ueditor 富文本编辑器集成
- vue集成百度UEditor富文本编辑器
- django 与 百度 ueditor 富文本编辑器集成之一:图片上传,文件上传
- 百度富文本编辑器UEditor
- 百度富文本编辑器UEditor
- 富文本编辑器百度ueditor
- 百度富文本编辑器UEditor
- 编辑器 UEditor 百度富文本web编辑器
- asp.net集成百度ueditor富文本
- Flask项目集成富文本编辑器UEditor
- Flask项目集成富文本编辑器UEditor
- 百度富文本编辑器ueditor使用总结
- 百度富文本编辑器ueditor使用
- 百度富文本编辑器ueditor使用总结
- 百度富文本编辑器Ueditor的使用
- 百度富文本编辑器ueditor使用小结
- 百度Ueditor富文本编辑器上传图片
- 电脑上的显示输出接口你都认识么
- selenium + PhantomJS 操作
- iOS开发系列–音频播放、录音、视频播放、拍照、视频录制
- 二维码生成与扫描
- 树莓派初学者?先做做这十个项目吧
- Django集成百度富文本编辑器uEditor攻略
- nodejs_node-inspector
- Google Espresso 环境搭建以及简单使用教程
- Linux的五个查找命令
- 求一个数的立方根
- 深入理解Android之Java Security(第一部分)
- win7一直检查更新解决方法
- 蒙特卡罗(Monte Carlo)
- 二进制文件复制