Django集成百度富文本编辑器uEditor攻略


Posted in Python onJuly 04, 2014

首先从 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
}

其中,start,是标志从第几张图片开始,个人感觉意义不大。

size:默认显示多少个文件、图片。

total:图片、文件总数量。

list:以数组形式列出图片、文件的相对地址。

这里,我实现了一个简单demo,可以实现文件、图片、视频的上传及在线图片、在线文件的功能。点击 这里 下载代码源码。

目前支持功能: 

基本文字、排版等功能

图片上传、文件上传、视频上传功能

在线文件、在线图片功能

未实现功能:

涂鸦功能

网络图片功能

功能已在CentOS下,部署到nginx下,实测,可用。

使用方法: -----

1. 下载这里的完整代码,直接cd到根目录,运行

python manage.py runserver 1989

,可直接查看效果演示。

2. 在urls.py中将uEditor所在目录配置成静态文件路径,本demo中为UE

( r'^UE/(?P<path>.*)$','django.views.static.serve', { 'document_root':os.path.dirname(__file__).replace('\\','/')+"/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中配置如下:

( r'^upload/(?P<path>.*)$', 'django.views.static.serve',{ 'document_root': (os.path.dirname(__file__)+"/upload").replace('\\','/') }),

之后,确保子目录是存在的,为了方便,程序里没有自动创建目录的方法,需要手工创建,例如demo中创建了images、vedio、 files、onlinefiles、onlineimages几个子目录

5. 将demo中的controller.py文件拷贝到项目中任意位置,其实controller就是一个异步处理的视图,拷贝完成后,在urls.py中配置相应的路由,demo中放到了根目录,所以配置如下:

url(r'ueEditorControler','ueEditor_django.controller.handler')

自己的项目中只需要将

ueEditor_django.controller.handler

改为

xxxx.controller.handler

即可

6. 配置工作最后一步,将”ueditor.config.js”文件的

, serverUrl: URL + "/net/controller.ashx"

修改为

, serverUrl: "/ueEditorControler"

即上一步配置的url路由

至此,配置工作完成,剩下的就是到页面上引用uEditor了,下面是一个简单的html页面,可根据uEditor放置位置调整脚本 和样式的引用路径

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
 <link rel="stylesheet" type="text/css" href="/UE/third-party/SyntaxHighlighter/shCoreDefault.css" rel="external nofollow" >
<script type="text/javascript" src="/UE/third-party/SyntaxHighlighter/shCore.js"></script>
<script type="text/javascript" charset="utf-8" src="/UE/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/UE/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="/UE/lang/zh-cn/zh-cn.js"></script>

<script type="text/javascript">
 var ue = UE.getEditor('editor');
 SyntaxHighlighter.all();
</script>
</head>
<body>
 <script id="editor" type="text/plain" style="width:auto;height:500px;"></script>
 <input type="button" onclick="" value="保存"/>
</body>
</html>
Python 相关文章推荐
Python中文字符串截取问题
Jun 15 Python
简单谈谈Python中函数的可变参数
Sep 02 Python
恢复百度云盘本地误删的文件脚本(简单方法)
Oct 21 Python
python机器学习之神经网络(二)
Dec 20 Python
Python内置模块ConfigParser实现配置读写功能的方法
Feb 12 Python
使用matplotlib中scatter方法画散点图
Mar 19 Python
使用pyecharts生成Echarts网页的实例
Aug 12 Python
pandas数据处理进阶详解
Oct 11 Python
python给指定csv表格中的联系人群发邮件(带附件的邮件)
Dec 31 Python
python enumerate内置函数用法总结
Jan 07 Python
python 实现socket服务端并发的四种方式
Dec 14 Python
python实现黄金分割法的示例代码
Apr 28 Python
一个小示例告诉你Python语言的优雅之处
Jul 04 #Python
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
Jul 04 #Python
Python Deque 模块使用详解
Jul 04 #Python
Python中的二叉树查找算法模块使用指南
Jul 04 #Python
深入分析在Python模块顶层运行的代码引起的一个Bug
Jul 04 #Python
python之import机制详解
Jul 03 #Python
Python之eval()函数危险性浅析
Jul 03 #Python
You might like
php为什么选mysql作为数据库? Mysql 创建用户方法
2007/07/02 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php实现的短网址算法分享
2014/06/20 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
php猴子选大王问题解决方法
2015/05/12 PHP
yii gridview实现时间段筛选功能
2017/08/15 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
23个Javascript弹出窗口特效整理
2011/02/25 Javascript
iframe的父子窗口之间的对象相互调用基本用法
2013/09/03 Javascript
Javascript MVC框架Backbone.js详解
2014/09/18 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
node.js回调函数之阻塞调用与非阻塞调用
2015/11/13 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
浅谈DOCTYPE对$(window).height()取值的影响
2016/07/21 Javascript
js 单引号替换成双引号,双引号替换成单引号的实现方法
2017/02/16 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
python中__slots__用法实例
2015/06/04 Python
Python只用40行代码编写的计算器实例
2017/05/10 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
python opencv对图像进行旋转且不裁剪图片的实现方法
2019/07/09 Python
python对矩阵进行转置的2种处理方法
2019/07/17 Python
python采集百度搜索结果带有特定URL的链接代码实例
2019/08/30 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
详解Python修复遥感影像条带的两种方式
2020/02/23 Python
Python类和实例的属性机制原理详解
2020/03/21 Python
python matplotlib绘制三维图的示例
2020/09/24 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
MySQL面试题目集锦
2016/04/14 面试题
财务情况说明书范文
2014/05/06 职场文书
会计试用期自我评价
2015/03/10 职场文书
2015年小学图书室工作总结
2015/05/18 职场文书
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
Java数据结构之堆(优先队列)
2022/05/20 Java/Android