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下使用Txt2Html实现网页过滤代理的教程
Apr 11 Python
用Python的Tornado框架结合memcached页面改善博客性能
Apr 24 Python
python判断字符串编码的简单实现方法(使用chardet)
Jul 01 Python
Python多线程爬虫实战_爬取糗事百科段子的实例
Dec 15 Python
Python将多份excel表格整理成一份表格
Jan 03 Python
python实现聊天小程序
Mar 13 Python
python smtplib模块自动收发邮件功能(一)
May 22 Python
python自动化测试之异常及日志操作实例分析
Nov 09 Python
pytorch 修改预训练model实例
Jan 18 Python
关于python的缩进规则的知识点详解
Jun 22 Python
利用python+request通过接口实现人员通行记录上传功能
Jan 13 Python
仅用几行Python代码就能复制她的U盘文件?
Jun 26 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中call_user_func_array()函数的用法演示
2012/02/05 PHP
ThinkPHP实现跨模块调用操作方法概述
2014/06/20 PHP
php中Y2K38的漏洞解决方法实例分析
2014/09/22 PHP
两个php日期控制类实例
2014/12/09 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
基于jquery的一个OutlookBar类,动态创建导航条
2010/11/19 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
2013/04/18 Javascript
JS实现定时页面弹出类似QQ新闻的提示框
2013/11/07 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
2013/12/02 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
2015/04/07 Javascript
7个有用的jQuery代码片段分享
2015/05/19 Javascript
jQuery实现checkbox全选的方法
2015/06/10 Javascript
基于Jquery和html5的7款个性化地图插件
2015/11/17 Javascript
常常会用到的截取字符串substr()、substring()、slice()方法详解
2015/12/16 Javascript
jQuery防止重复绑定事件的解决方法
2016/05/14 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
2018/01/17 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
[10:49]2014国际邀请赛 叨叨刀塔第二期为真正的电竞喝彩
2014/07/21 DOTA
[01:35:53]完美世界DOTA2联赛PWL S3 Magma vs GXR 第二场 12.13
2020/12/17 DOTA
Python 常用 PEP8 编码规范详解
2017/01/22 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
使用Python实现租车计费系统的两种方法
2018/09/29 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
用C#语言写出与SQLSERVER访问时的具体过程
2013/04/16 面试题
开学典礼感言
2014/02/16 职场文书
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
安全生产标语
2014/06/06 职场文书
学习十八大宣传标语
2014/10/09 职场文书
个人作风建设自查报告
2014/10/22 职场文书
python实现简易自习室座位预约系统
2021/06/30 Python
Vue如何清空对象
2022/03/03 Vue.js