0

0

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

php中文网

php中文网

发布时间:2016-06-16 08:43:30

|

1552人浏览过

|

来源于php中文网

原创

首先从 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,可以实现文件、图片、视频的上传及在线图片、在线文件的功能。点击 这里 下载代码源码。

目前支持功能: 

基本文字、排版等功能

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

在线文件、在线图片功能

未实现功能:

神采PromeAI
神采PromeAI

将涂鸦和照片转化为插画,将线稿转化为完整的上色稿。

下载

涂鸦功能

网络图片功能

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

使用方法: -----

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

python manage.py runserver 1989

,可直接查看效果演示。

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

( r'^UE/(?P.*)$','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.*)$', '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放置位置调整脚本 和样式的引用路径




 








 
 


相关文章

热门游戏推荐
热门游戏推荐

最近有什么好玩的游戏?最近哪些游戏比较好玩?这里为大家带来热门游戏合集,汇聚了最新最好玩的高分爆款游戏,还在为不知道玩什么游戏而烦恼的玩家,快来保存下载体验吧!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 2.4万人学习

Django DRF 源码解析
Django DRF 源码解析

共21课时 | 1.4万人学习

Django参考手册
Django参考手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号