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

2024-09-30 21:13:02

首先从 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轻松使用富文本编辑器CKEditor的方法

前言 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的控件.ckeditor是一款基于javascript,使用非常广泛的开源网页编辑器.它可以和多种编程语言相结合,python当然也不例外.本文就来介绍一下如何在基于django博客系统如何完美地用上ckeditor. 使用方法 1.安装 pip install django-ckeditor 2.将'c
Django集成百度富文本编辑器uEditor攻略

首先从 ueEditor官网下载最新版本的包,目前官网上提供了ASP..NET.PHP.JSP版本的,django版本只有一个第三方个人开发的,但看上出配置起来稍微复杂一点. 这里不介绍uEditor的使用方法,也不过多解释uEditor的配置方法,官网上都有详细的文档和API介绍,下载的Demo中也有常用的方法的示例代码,这里主要介绍uEditor和django集成需要修改的地方. 这里下载任意一个版本的都可以,因为我们只需要把关于ueEditor前端部分的抽取出来,至于后端服务器的,我们自
Django在admin后台集成TinyMCE富文本编辑器的例子

Django原生的TextField并不友好,集成TinyMCE富文本编辑器 Django版本:1.11.5 TinyMCE版本:4.6.7 第一步:从官网下载TinyMCE https://www.tinymce.com/download/ 注意下载的是下面那个开发包,Dev Package.此包包含TinyMCE社区,开发工具和完整的源代码. 第二步:把压缩包内tinymce目录内的所有文件和文件夹复制到Django项目中static目录内: 第三步:编辑 admin.py 文件: from
Django添加KindEditor富文本编辑器的使用

KindEditor简介: KindEditor是一套开源的在线HTML编辑器,主要用于让用户在网站上获得所见即所得编辑效果,开发人员可以用KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框. KindEditor使用JavaScript编写,可以无缝地与 Java..NET.PHP.ASP 等程序集成,比较适合在 CMS.商城.论坛.博客.Wiki.电子邮件等互联网应用上使用. 在Django Admin当中加入KindEditor,这比干巴巴的text
Python的Flask框架中集成CKeditor富文本编辑器的教程

CKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写.具备功能强大.配置容易.跨浏览器.支持多种编程语言.开源等特点.它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了CKeditor. 下载CKeditor 访问CKeditor官方网站,进入下载页面,选择Standard Package(一般情况下功能足够用了),然后点击Download CKEditor按钮下载ZIP格式的安装文件.如果你想尝试更多的功能,可以选择下载Full
vue集成百度UEditor富文本编辑器使用教程

在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于是我将百度富文本编辑器放到vue项目中使用.效果图如下废话不多说. 1.使用vue-cli构建一个vue项目.然后下载UEditor源码,地址把项目复制到vue项目的static文件下.目的是让服务可以访问到里面的文件,打开UEditor目录文件.这里下载的是jsp版本的.文件名字没有更改过.打
Vue.js结合Ueditor富文本编辑器的实例代码

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop
React中使用UEditor百度富文本的方法

前言本文将介绍笔者在React的项目中使用百度的富文本编辑器Ueditor的过程.注意本文不提供一条龙式的使用方法,只是将使用过程中的一些实现思路进行总结,供以参考.react项目中导入ueditor,会存在各种不正交的问题,需要注意. 引入首先在ueditor官网下载最新安装包,然后在项目入口的html中导入(导入方式不一,可以采用import的方式,需要自行度娘.但是无论哪种引入方式,只要想自定义功能,不正交问题就难以避免QAQ).不管三七二十一先跑起来再说.. <!DOCTYPE HT
vue2.x集成百度UEditor富文本编辑器的方法

最近开发vue项目过程中,由于产品需要在项目中添加富文本编辑器,也在npm上找了几个基于vue开发的富文本编辑器,但是对兼容性比较高,不能兼容到IE9,10.所以最后决定使用百度UEditor.然后又是各种找如何集成到vue中.好记性不如烂笔头,记录下来以便以后需要的时候可以直接用. 1.首先下载UEditor源码,将整个文件放到static文件夹中 2.然后将UEditor集成到项目中去. 找到src/main.js,在main.js中 import '../static/ueditor/ue
nodejs后台集成ueditor富文本编辑器的实例

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.. 1 下载ueditor nodejs版本 2 复制public目录下面的文件到项目静态资源public文件夹下 3 在项目根目录创建ueditor文件夹要复制进来的内容为 4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块 5 项目根目录下创建 ue.js 代码部分来自于
Vue2.0中集成UEditor富文本编辑器的方法

在vue的'项目中遇到了需要使用富文本编辑器的需求,在github上看了很多vue封装的editor插件,很多对图片上传和视频上传的支持并不是很好,最终还是决定使用UEditor. 这类的文章网上有很多,我进行了摸索.手写代码.汇总.排版,形成了这篇文章. 下载对应的UEditor源码首先,去官网上下载UEditor的源码,根据你后台语言的不同下载对应的版本(PHP.Asp..Net.Jsp). http://ueditor.baidu.com/website/download.html 下载

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

相关推荐

随机推荐