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>

查看源代码，请到这里

Django集成百度富文本编辑器uEditor的更多相关文章

  1. 百度富文本编辑器UEditor安装配置全过程

    网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

  2. 百度富文本编辑器ueditor使用总结

    最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...

  3. 百度富文本编辑器ueditor使用启示

    百度富文本编辑器ueditor使用启示 一.总结 一句话总结:使用工具,多去看官方demo,非常详细. 二.百度富文本编辑器ueditor使用启示 官方完整demo 官方完整demo对应的源代码 &l ...

  4. springboot+layui 整合百度富文本编辑器ueditor入门使用教程（踩过的坑）

    springboot+layui 整合百度富文本编辑器ueditor入门使用教程(踩过的坑) 写在前面: ​ 富文本编辑器,Multi-function Text Editor, 简称 MTE, 是一 ...

  5. thinkphp5.1中适配百度富文本编辑器ueditor

    百度富文本编辑器ueditor虽然很老,但是功能齐全,我近期需要能批量粘贴图片的功能,但是找不到,很无奈.然后现在就分享一下如何把ueditor适配到thinkphp5.1,有知道如何批量上传图片的艾 ...

  6. vue集成百度富文本编辑器

    1.前期工作,访问百度富文本官网下载相应的百度富文本文件,根据后端用的技术下载相应的版本,建议下载最新版UTF-8版 (有图有真相,看图) https://ueditor.baidu.com/webs ...

  7. 百度富文本编辑器ueditor在jsp中的使用（ssm框架中的应用）

    折腾了一下午终于把百度富文本编辑器ueditor搞定了!   项目地址:https://github.com/724888/lightnote_new     首先我参考了一个ueditor的demo ...

  8. Html引入百度富文本编辑器ueditor

    在日常工作用,肯定有用到富文本编辑器的时候,富文本编辑器功能强大使用方便,我用的是百度富文本编辑器,首先需要下载好百度编辑器的demo, 然后创建ueditor.html文件,引入百度编辑器,然后在h ...

  9. Jfinal整合百度富文本编辑器ueditor

    ueditor配置文件ueditor.config.js修改参数serverUrl:(改为要调用的action) 后台代码 package com.sandu.mega.admin.ueditor; ...

随机推荐

  1. mysq安装以及修改密码

    安装版MySQL是不能一键安装的,下载下来是压缩包,解压后只要进行相关配置就可以正常使用: 文章主要是记录一下,以防自己忘记: 1.首先在mysql官网--http://dev.mysql.com/d ...

  2. .net 批量打印可实现方案

    最近几年一直在教育行业工作,主要负责竞赛类系统的开发工作,包括网上报名,安排考场,在线考试,学业报告书等. 打印功能在这个信息化时代非常普遍,浏览器都自带打印功能,通常的做法是调用 window.pr ...

  3. LeetCode（124） Binary Tree Maximum Path Sum

    题目 Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequen ...

  4. LinkedHahsMap和HashMap的比较

    http://www.cnblogs.com/hubingxu/archive/2012/02/21/2361281.html#commentform 一般情况下,我们用的最多的是HashMap,在M ...

  5. ElasticSearch学习-centos下安装

    1.安装java运行环境(jre) //这里我安装了jdk 其实只需要安装jre就可以了 0)cd /usr;mkdir /usr/java; cd java 1)wget http://downlo ...

  6. javascript中onload事件如何绑定及执行顺序

    onload事件,顾名思义就是为了js程序能够在网页加载成功过后进行执行.对于放在head里面的js来说,非常必要. 如何给网页绑定onload,主要有三种方式: window.onload=func ...

  7. Picard 法求方程根

    要点: 首先对于任何方程 :f(x)=0 ,可以转换成 f(x)+x-x => f(x)+x=x; 取g(x)=f(x)+x;  那么 新方程g(x)=x 的解即是 f(x)=0的解,即g(x) ...

  8. Python项目：扇贝网小组查卡助手

    扇贝网是一个非常棒的英语学习网站,大家还可以加入一些小组,一起交流学习.共同进步.但是,小组管理起来非常辛苦,尤其是在0点前踢出不打卡的成员,因此考虑利用程序来实现小组查卡自动化. 登录 操作 扇贝网 ...

  9. uva 11401 Triangle Counting

    // uva 11401 Triangle Counting // // 题目大意: // // 求n范围内,任意选三个不同的数,能组成三角形的个数 // // 解题方法: // // 我们设三角巷的 ...

  10. 学习django之构建Web是Meta嵌套类的几处使用

    Django中meta嵌套类的使用 1.模型中使用嵌套类 在定义抽象模型时如: class Meta : abstract=true 用来指明你创建的模型是一个抽象基础类的模型继承. 2.在一个对象对 ...