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

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 部分,包含以下内容(路径要改成适合你自己的):
程序代码 程序代码

<script type="text/javascript" charset="utf-8">
        window.UEDITOR_HOME_URL = "/static/js/ueditor/";
    </script>
    <script type="text/javascript" charset="utf-8" src="/static/js/ueditor/editor_config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/static/js/ueditor/editor_all_min.js"></script>
    <link rel="stylesheet" type="text/css" href="/static/js/ueditor/themes/default/ueditor.css"/>    


模板的正文可以是如下内容,在<body>与</body>之间:
程序代码 程序代码

<textarea id="content" name="content" style="width:575px;line-height:18px;"></textarea>


在html模板的结尾,在</body>之前,加上如下代码:
程序代码 程序代码

<script>
    var ue=new UE.ui.Editor();
    ue.render('content');
</script>


到此,模板配置完毕。在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集成源码

除非申明,文章均为一号门原创,转载请注明本文地址,谢谢!
[本日志由 轻舞肥羊 于 2012-12-12 11:26 AM 编辑]
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: django ueditor
相关日志:
评论: 11 | 引用: 0 | 查看次数: -
回复回复chapsticks[2014-09-12 09:01 AM | del]
myresponse = "{'original':'%s','url':'%s','title':'%s','state':'%s'}" % (source_filename, real_url, source_pictitle, 'SUCCESS')
你这里只有返回正确处理的信息,我想返回错误信息需要怎么改变这几个参数呢
回复回复轨迹[2014-03-27 02:31 PM | del]
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]会好些

回复来自 轻舞肥羊 的评论 轻舞肥羊 于 2014-03-27 08:24 PM 回复
是的,当初写的只是测试程序,没考虑到特殊情况,谢谢指出来。
回复回复es[2013-01-21 10:35 PM | del]
正在找Django的富文本 + 上传图片的例子,找来找去全是很早之前的实现方案 ,楼主这个给力!!
回复回复小黑[2012-12-12 09:57 AM | del]
按照你这个写个。上传失败,[11/Dec/2012 19:54:18] "POST /media/ueditor_imgup HTTP/1.1" 404 2705  没发送到那个路径吧

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

整个代码是完全测试过的。

回复来自 轻舞肥羊 的评论 轻舞肥羊 于 2012-12-12 11:21 AM 回复
我上传了我的源代码,你参考下:http://www.yihaomen.com/article/python/329.htm
回复回复小黑[2012-12-11 03:45 PM | del]
lz,为啥我按照你的这个写的,访问模板页面的时候不加载ueditor呢
回复来自 轻舞肥羊 的评论 轻舞肥羊 于 2012-12-11 08:41 PM 回复
如果没有加载ueditor ,  那么检查 ueditor的 js 文件是否正确加载了,django 程序要注意 静态资源文件css,js等的加载。有空我直接把例子代码放上来。
回复回复G清[2012-11-09 05:08 PM | del]
我在github.com/zhangfisher/DjangoUeditor找到了,不过还没弄懂在哪里改动使得图片上传那些功能可以使用
回复来自 轻舞肥羊 的评论 轻舞肥羊 于 2012-11-09 05:25 PM 回复
他的方式和我的方式有点不同,但基本类似,你认真看下我写的,应该知道,重点有以下:
1.配置 urls.py 2. 写 views.py 3. 修改 ueditor 的editor_config.js文件 4.要注意你配置的图片文件上传路径要在web server 能访问的目录.
回复回复zhou[2012-11-09 10:30 AM | del]
那个问题我搞定了,谢谢啦
回复回复G清[2012-11-08 09:52 PM | del]
你好,我就是想知道这个用在admin的时候怎么弄?有没类似TINYMCE的tinymce_models.HTMLField这种用法?
回复来自 轻舞肥羊 的评论 轻舞肥羊 于 2012-11-09 09:20 AM 回复
在django的admin中,我还没试过。要扩展吧。
回复回复zhou[2012-11-08 04:47 PM | del]
你好,我做到上传成功,然后点确定,不出图片,但是图片确实上传成功了(对应路径下有图片),提示 08/Nov/2012 02:41:01] "GET /home/zhou/media/05fecb8e-2980-11e2-bdd7-d4bed9bd0289.png HTTP/1.1" 404 2189
是有什么方法需要实现么,这个GET请求 你的文章里确实没提到过。。
回复来自 轻舞肥羊 的评论 轻舞肥羊 于 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 目录,要能从 浏览器能访问之后才可以。不知道你明白没有。
回复回复轻舞肥羊[2012-08-30 11:11 PM | del]
不是吧,只要有点django基础,就可以照着文档学会的。
发表评论
昵 称:
密 码: 游客发言不需要密码.
内 容:
验证码: 验证码
选 项:
虽然发表评论不用注册,但是为了保护您的发言权,建议您注册帐号.