django 与 百度 ueditor 富文本编辑器集成之一:图片上传,文件上传

摘要: django 是基于 python 的一个很好的web开发框架。ueditor 是百度开源的一个富文本编辑器。有很好的用户体验,很适合中国人使用的一个编辑器。在使用ueditor 之前,我集成过 fckeditor , ckeditor 。基本没什么难度。但功能没有ueditor 强大。因此产生了用django 集成 ueditor 的想法。查看了百度官方的文档以及例子,发现只有 java,php,.net 版本的例子提供,而并没有python,或django的例子。所以就只能自己造轮子了。富文本编辑器,只是个JS框架,与后台基本没有关系。后台只是响应 HTTP 请求,做出处理,并返回结果就好。所以用DJANGO来处理,应该也很容易,开工吧。

django 是基于 python 的一个很好的web开发框架。ueditor 是百度开源的一个富文本编辑器。有很好的用户体验,很适合中国人使用的一个编辑器。

在使用ueditor 之前,我集成过 fckeditor , ckeditor 。基本没什么难度。但功能没有ueditor 强大。因此产生了用django 集成 ueditor 的想法。

查看了百度官方的文档以及例子,发现只有 java,php,.net 版本的例子提供,而并没有python,或django的例子。所以就只能自己造轮子了。富文本编辑器,只是个JS框架,与后台基本没有关系。后台只是响应 HTTP 请求,做出处理,并返回结果就好。所以用DJANGO来处理,应该也很容易,开工吧。

下载百度ueditor
这个就不必多说了,地球人都知道,百度一下就知道了。要注意的是,我下载的是 java utf-8 版本的,因为没有 django 版本的,所以你随便下载一个适合自己的 完整版本就可以了。

做一个html模板页面,在 head 部分,包含以下内容(路径要改成适合你自己的):

  
    
    
        


模板的正文可以是如下内容,在与之间:
  


在html模板的结尾,在之前,加上如下代码:



到此,模板配置完毕。在django 工程的 urls.py 文件中配置一个url 路径,访问该模板页面,现在可以看到编辑器加载成功:

这是,点击上传图片图标,可以看到可以用本地上传,选择多个图片,但却无法上传,原因很简单,没有后台响应。所以需要些django后台来处理。
新建一个 app, 比如 Ueditor,看我的工程结构:

在里面建立一个 views.py 文件,代码如下:
#coding:utf-8
'''
Created on 2012-8-29
@author: yihaomen.com
'''
from XieYin import settings
from django.http import HttpResponse, HttpResponseRedirect
from django.views.decorators.csrf import csrf_exempt
import Image
import os
import time
import urllib2
import uuid

def __myuploadfile(fileObj, source_pictitle, source_filename,fileorpic='pic'):
    """ 一个公用的上传文件的处理 """
    myresponse=""
    if fileObj:
        filename = fileObj.name.decode('utf-8', 'ignore')
        fileExt = filename.split('.')[1]
        file_name = str(uuid.uuid1())
        subfolder = time.strftime("%Y%m")
        if not os.path.exists(settings.MEDIA_ROOT[0] + subfolder):
            os.makedirs(settings.MEDIA_ROOT[0] + subfolder)
        path = str(subfolder + '/' + file_name + '.' + fileExt)
        
        if fileExt.lower() in ('jpg', 'jpeg', 'bmp', 'gif', 'png',"rar" ,"doc" ,"docx","zip","pdf","txt","swf","wmv"):
        
            phisypath = settings.MEDIA_ROOT[0] + path
            destination = open(phisypath, 'wb+')
            for chunk in fileObj.chunks():
                destination.write(chunk)            
            destination.close()
            
            if fileorpic=='pic':
                if fileExt.lower() in ('jpg', 'jpeg', 'bmp', 'gif', 'png'):
                    im = Image.open(phisypath)
                    im.thumbnail((720, 720))
                    im.save(phisypath)
                    
            real_url = '/static/upload/' + subfolder + '/' + file_name + '.' + fileExt       
            myresponse = "{'original':'%s','url':'%s','title':'%s','state':'%s'}" % (source_filename, real_url, source_pictitle, 'SUCCESS')
    return myresponse


@csrf_exempt
def ueditor_ImgUp(request): 
    """ 上传图片 """   
    fileObj = request.FILES.get('upfile', None)   
    source_pictitle = request.POST.get('pictitle','')
    source_filename = request.POST.get('fileName','')  
    response = HttpResponse()  
    myresponse = __myuploadfile(fileObj, source_pictitle, source_filename,'pic')
    response.write(myresponse)
    return response
   
    
@csrf_exempt
def ueditor_FileUp(request): 
    """ 上传文件 """   
    fileObj = request.FILES.get('upfile', None)   
    source_pictitle = request.POST.get('pictitle','')
    source_filename = request.POST.get('fileName','')    
    response = HttpResponse()  
    myresponse = __myuploadfile(fileObj, source_pictitle, source_filename,'file')
    response.write(myresponse)
    return response

@csrf_exempt 
def ueditor_ScrawUp(request):
    """ 涂鸦文件,处理 """
    pass


到目前为止,刚接触ueditor ,时间有限,我就做了上传文件和图片的。涂鸦,抓远程图片等,我在有时间的时候会补充出来。

在urls.py 中配置
 url(r'^ueditor_imgup$','XieYin.app.Ueditor.views.ueditor_ImgUp'),
 url(r'^ueditor_fileup$','XieYin.app.Ueditor.views.ueditor_FileUp'), 


修改百度ueditor 配置文件:editor_config.js
 //,imageUrl:URL+"jsp/imageUp.jsp"  
  ,imageUrl:"/ueditor_imgup"
  //图片上传提交地址
 ,imagePath:""      

 //附件上传配置区
 ,fileUrl:"/ueditor_fileup"               //附件上传提交地址
 ,filePath:""             


启动django程序
进入刚才的页面,选择上传图片.






到此,图片上传成功,其实文件也一样,只不过类型不同而已。

注意
程序确实实现了上传于ueditor 的继承。但还没有考虑到安全性,比如session的检查等。需要的,可以自己加上。

源码下载: django ueditor集成源码

上一篇: python 字典dict , 序列list 排序方法
下一篇: django与百度ueditor 集成之二:涂鸦,抓图,搜视频,图片浏览

Avatar

chapsticks 评论于: 2014-09-12

myresponse = "{'original':'%s','url':'%s','title':'%s','state':'%s'}" % (source_filename, real_url, source_pictitle, 'SUCCESS')
你这里只有返回正确处理的信息,我想返回错误信息需要怎么改变这几个参数呢

Avatar

轨迹 评论于: 2014-03-27

fileExt = filename.split('.')[1]
LZ这个有问题,如果上传的文件的名称中包含多个“.”会导致文件后缀名获取错误,结果导致无法上传了。 比如文件名为“xxx.v1.0.rar”,获取到的后缀名是.v了。 那么你这句就无法处理了:if fileExt.lower() in ('jpg', 'jpeg', 'bmp', 'gif', 'png',"rar" ,"doc" ,"docx","zip","pdf","txt","swf","wmv"):

改成fileExt = filename.split('.')[-1]会好些

[reply=轻舞肥羊,2014-03-27 08:24 PM]是的,当初写的只是测试程序,没考虑到特殊情况,谢谢指出来。[/reply]

Avatar

es 评论于: 2013-01-21

正在找Django的富文本 + 上传图片的例子,找来找去全是很早之前的实现方案 ,楼主这个给力!!

Avatar

小黑 评论于: 2012-12-12

按照你这个写个。上传失败,[11/Dec/2012 19:54:18] "POST /media/ueditor_imgup HTTP/1.1" 404 2705  没发送到那个路径吧

[reply=轻舞肥羊,2012-12-12 10:26 AM]检查下你的配置环境,可能路径等与我不一样,这个代码是真的测试可行的。可能上传的路径等与你配置的不一样(这是我 的环境配置的路径:real_url = '/static/upload/' + subfolder + '/' + file_name + '.' + fileExt    你的配置可能与我不一样  )。如果你有 调试工具 ,比如 pydev 等的话,可以断点调试下。

整个代码是完全测试过的。[/reply]
[reply=轻舞肥羊,2012-12-12 11:21 AM]我上传了我的源代码,你参考下:http://www.yihaomen.com/article/python/329.htm[/reply]

Avatar

小黑 评论于: 2012-12-11

lz,为啥我按照你的这个写的,访问模板页面的时候不加载ueditor呢
[reply=轻舞肥羊,2012-12-11 08:41 PM]如果没有加载ueditor ,  那么检查 ueditor的 js 文件是否正确加载了,django 程序要注意 静态资源文件css,js等的加载。有空我直接把例子代码放上来。[/reply]

Avatar

G清 评论于: 2012-11-09

我在github.com/zhangfisher/DjangoUeditor找到了,不过还没弄懂在哪里改动使得图片上传那些功能可以使用
[reply=轻舞肥羊,2012-11-09 05:25 PM]他的方式和我的方式有点不同,但基本类似,你认真看下我写的,应该知道,重点有以下:
1.配置 urls.py 2. 写 views.py 3. 修改 ueditor 的editor_config.js文件 4.要注意你配置的图片文件上传路径要在web server 能访问的目录.[/reply]

Avatar

zhou 评论于: 2012-11-09

那个问题我搞定了,谢谢啦

Avatar

G清 评论于: 2012-11-08

你好,我就是想知道这个用在admin的时候怎么弄?有没类似TINYMCE的tinymce_models.HTMLField这种用法?
[reply=轻舞肥羊,2012-11-09 09:20 AM]在django的admin中,我还没试过。要扩展吧。[/reply]

Avatar

zhou 评论于: 2012-11-08

你好,我做到上传成功,然后点确定,不出图片,但是图片确实上传成功了(对应路径下有图片),提示 08/Nov/2012 02:41:01] "GET /home/zhou/media/05fecb8e-2980-11e2-bdd7-d4bed9bd0289.png HTTP/1.1" 404 2189
是有什么方法需要实现么,这个GET请求 你的文章里确实没提到过。。
[reply=轻舞肥羊,2012-11-08 05:20 PM]既然是  /home/zhou/media/05fecb8e-2980-11e2-bdd7-d4bed9bd0289.png 这个文件找不到,那说明 这个文件夹 根本不在 web server 目录下面,也就是说你用类似于:http://your_url/media/05fecb8e-2980-11e2-bdd7-d4bed9bd0289.png 这种方式也无法得到,说明了一个问题。你要在django settings.py 里面设置好media 目录,要能从 浏览器能访问之后才可以。不知道你明白没有。[/reply]

Avatar

轻舞肥羊 评论于: 2012-08-30

不是吧,只要有点django基础,就可以照着文档学会的。

Avatar

电动窗帘 评论于: 2012-08-30

www.nbwhcl.com
我很认真地学习了,可还是没弄会
[reply=轻舞肥羊,2012-08-30 11:12 PM]如果有点django的基础,肯定可以照着做出来的。[/reply]
 评论 ( What Do You Think )
名称
邮箱
网址
评论
验证
   
 

 


  • 微信公众号

  • 我的微信

站点声明:

1、一号门博客CMS,由Python, MySQL, Nginx, Wsgi 强力驱动

2、部分文章或者资源来源于互联网, 有时候很难判断是否侵权, 若有侵权, 请联系邮箱:summer@yihaomen.com, 同时欢迎大家注册用户,主动发布无版权争议的 文章/资源.

3、鄂ICP备14001754号-3, 鄂公网安备 42280202422812号