专栏首页古时的风筝Django集成百度富文本编辑器uEditor

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

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码。

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

查看源代码,请到这里

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 我真的不想再用 JPA 了

    在开发者的圈子里,没当说到一种技术好或者不好,都会引发激烈或者不激烈的争论,直到一个开发者出来说 PHP 是世界上最好的语言,大家伙儿才会纷纷退去继续写代码。

    古时的风筝
  • web scraper 抓取网页数据的几个常见问题

    相关文章: 最简单的数据抓取教程,人人都用得上 web scraper 进阶教程,人人都用得上

    古时的风筝
  • ASP.NET-自定义HttpModule与HttpHandler

    在之前的ASP.NET是如何在IIS下工作的这篇文章中介绍了ASP.NET与IIS配合工作的机制,在http请求经过一系列处理后,最后到达ASP.NET管道中...

    古时的风筝
  • 【DUBBO】 服务引用RegistryDirectory

    实现了FactoryBean接口,所以在获取实例的时候,实际上是调用getObject方法返回实例。这里面的get方法继承自ReferenceConfig类

    spilledyear
  • JS基础测试: 下列方法中引入JS写法正确的是?

    如需使用外部文件,请在 <script> 标签的 "src" 属性中设置该 .js 文件:

    舒克
  • 机器学习特征工程和优化方法

    特征工程,顾名思义,是对原始数据进行一系列工程处理,将其提炼为特征,作为输入供算法和模型使用。从本质上来讲,特征工程是一个表示和展现数 据的过程。在实际工作中,...

    大数据技术与机器学习
  • 1 分钟小技巧系列 | 巧用 Grep 快速测试正则表达式

    我们写完一个正则表达式后,并不知道是否与预期结果相符。比如:在 Nginx 中使用的正则表达式。这时我们一般会用 service nginx reload 命令...

    iMike
  • 什么是服务网格(Service Mesh)?为什么需要使用它?

    在过去的一年中,服务网格(Service Mesh)已经演变成为云原生堆栈的重要组成部分。像 Paypal,Lyft,Ticketmaster 和 Credit...

    DevOps时代
  • t检验的几种应用案例

    在平时的工作或学习中可能会碰到统计学中的假设检验问题,如常见的卡方检验、t检验以及正态性检验等,而这些检验的目的都是为了论证某个设想,并通过统计学的方法做解释。...

    1480
  • Python数据可视化:25年GDP之变

    数据森麟

扫码关注云+社区

领取腾讯云代金券