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中操作时间之strptime()方法的使用
Dec 30 Python
Python中的变量和作用域详解
Jul 13 Python
Python中with及contextlib的用法详解
Jun 08 Python
详谈python read readline readlines的区别
Sep 22 Python
Python中生成器和迭代器的区别详解
Feb 10 Python
Python中logging.NullHandler 的使用教程
Nov 29 Python
Python3 jupyter notebook 服务器搭建过程
Nov 30 Python
python 比较2张图片的相似度的方法示例
Dec 18 Python
Python BeautifulReport可视化报告代码实例
Apr 13 Python
基于Python中random.sample()的替代方案
May 23 Python
Python制作简单的剪刀石头布游戏
Dec 10 Python
python基于openpyxl生成excel文件
Dec 23 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实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
服务器上配置PHP运行环境教程
2015/02/12 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
2015/08/08 Javascript
Node调用Java的示例代码
2017/09/20 Javascript
浅谈Node.js爬虫之网页请求模块
2018/01/11 Javascript
webpack下实现动态引入文件方法
2018/02/22 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
2019/05/15 Javascript
在antd4.0中Form使用initialValue操作
2020/11/02 Javascript
python操作gmail实例
2015/01/14 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
python实现人民币大写转换
2018/06/20 Python
python样条插值的实现代码
2018/12/17 Python
Python函数的参数常见分类与用法实例详解
2019/03/30 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
Django框架组成结构、基本概念与文件功能分析
2019/07/30 Python
解决pytorch-yolov3 train 报错的问题
2020/02/18 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python自省及反射原理实例详解
2020/07/06 Python
Django正则URL匹配实现流程解析
2020/11/13 Python
浅析Python的命名空间与作用域
2020/11/25 Python
Python Socket多线程并发原理及实现
2020/12/11 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
历史学专业个人的自我评价
2013/10/13 职场文书
高级人员简历的自我评价分享
2013/11/03 职场文书
工人先进事迹材料
2014/12/26 职场文书
2015年乡镇纪委工作总结
2015/05/26 职场文书
党小组评议意见
2015/06/02 职场文书
团干部培训班心得体会
2016/01/06 职场文书
2019大学毕业晚会主持词
2019/06/21 职场文书
MySQL 不等于的三种使用及区别
2021/06/03 MySQL