Python编程
搜索
分类

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

作者：hebedich 时间：2021-01-11 21:43:21　

首先从 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>
标签：Django,uEditor
0
投稿

猜你喜欢

  • python爬虫框架feapder的使用简介

    2021-07-20 14:38:27

  • python原始套接字编程示例分享

    2021-10-09 19:00:07

  • python实现过滤敏感词

    2021-02-26 04:23:17

  • 解决django同步数据库的时候app models表没有成功创建的问题

    2024-01-15 02:04:09

  • Python之list对应元素求和的方法

    2022-12-30 20:18:00

  • python中enumerate函数用法实例分析

    2023-04-02 05:14:20

  • 分享最新Sublime Text4 Build 4107注册码(密钥)汉化及完美永久破解方法

    2022-12-17 10:24:53

  • 如何使用Python程序完成描述性统计分析需求

    2021-01-11 22:11:20

  • Go系列教程之反射的用法

    2024-04-25 15:25:32

  • Go语言实现新春祝福二维码的生成

    2023-10-16 06:14:32

  • ASP怎么谈到应用到类的？

    2008-03-10 11:21:00

  • MySQL运行状况查询方式介绍

    2024-01-26 03:54:52

  • python使用pgzero进行游戏开发

    2022-10-28 11:32:35

  • Python+OpenCV图像处理——实现轮廓发现

    2023-12-12 23:30:31

  • pandas将numpy数组写入到csv的实例

    2021-02-07 00:51:00

  • Python将多个excel文件合并为一个文件

    2021-10-16 14:06:55

  • go中string、int、float相互转换的实现示例

    2024-04-28 09:14:19

  • Python线程条件变量Condition原理解析

    2022-07-23 02:52:06

  • vue项目input标签checkbox,change和click绑定事件的区别说明

    2024-05-21 10:29:27

  • CentOS 安装redis和MySQL

    2024-01-20 16:05:21
    • asp之家 网络编程 m.aspxhome.com