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编程实现随机生成多个椭圆实例代码
Jan 03 Python
浅谈Matplotlib简介和pyplot的简单使用——文本标注和箭头
Jan 09 Python
VSCode下配置python调试运行环境的方法
Apr 06 Python
python使用knn实现特征向量分类
Dec 26 Python
基于python if 判断选择结构的实例详解
May 06 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
Jul 08 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
Jul 25 Python
Python操作远程服务器 paramiko模块详细介绍
Aug 07 Python
python numpy 反转 reverse示例
Dec 04 Python
Python面向对象实现方法总结
Aug 12 Python
Python使用pyenv实现多环境管理
Feb 05 Python
Django对接elasticsearch实现全文检索的示例代码
Aug 02 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动态图像的创建
2006/10/09 PHP
PHP 多维数组的排序问题 根据二维数组中某个项排序
2011/11/09 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
php微信开发自定义菜单
2016/08/27 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
jQuery操作表单常用控件方法小结
2015/03/23 Javascript
JQuery datepicker 用法详解
2015/12/25 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
JavaScript学习笔记之数组去重
2016/03/23 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
2016/08/11 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
jquery mobile移动端幻灯片滑动切换效果
2020/04/15 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
p5.js入门教程之平滑过渡(Easing)
2018/03/16 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
小程序实现列表多个批量倒计时
2021/01/29 Javascript
layui输入框只允许输入中文且判断长度的例子
2019/09/18 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
vue项目接口域名动态获取操作
2020/08/13 Javascript
Python统计文件中去重后uuid个数的方法
2015/07/30 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
浅述python2与python3的简单区别
2018/09/19 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
小 200 行 Python 代码制作一个换脸程序
2020/05/12 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
机械制造专业大学生自我鉴定
2014/09/19 职场文书
公务员年度个人总结
2015/02/12 职场文书
Pytest中skip skipif跳过用例详解
2021/06/30 Python