Django中扩展TinyMCE使其支持图片上传功能

1.         在/tiny_mce/plugins/advimage/image.htm中添加/修改代码

 

         <script type="text/javascript" src="/static/js/jquery-1.4.2.min.js"></script>

         <script type="text/javascript" src="/static/js/jquery.form.js"></script>

。。。

         <script type="text/javascript">

         function func_upload_image(){

                   if($('#id_upload_file').val()==''){

                            alert('请选择要上传的图片@');

                            return false;

                   }

                   $('#id_insert_image_form').ajaxSubmit({

                            beforeSubmit:function(){},

                            success: function(html, status){

                                     //alert(html);

                                     var result = html.replace("<PRE>", "");

                result = result.replace("</PRE>", "");

                if (html.indexOf("格式") > 0) {

                    alert(result);

                    return;

                }                                    

                                     $("#src").val(result);

                                     ImageDialog.showPreviewImage($("#src").val());

                                     return;

                            }

                   });

         }

         </script>

将form标记改为

         <form id="id_insert_image_form" onsubmit="ImageDialog.insert();return false;" action="/upload_image/" method="post" enctype="multipart/form-data">

        

在图片URL输入框下加入表格行：

 

 <tr>

      <td colspan="2"><input type="file" class="mceFocus"   name="upload_file" id="id_upload_file" />

      <input type="button" class="updateButton" onclick="func_upload_image();" value="上传"/></td>

  </tr>

 

2.         在views.py中添加支持代码：

#===============================================================================

#在TinyMCE中扩展支持图片上传的功能（并生成120＊120的缩略图）

#===============================================================================

from PIL import Image, ImageFile
from cms.models import Article
from datetime import *
from django.conf.global_settings import STATIC_ROOT, STATIC_URL
from django.http.response import HttpResponse
from django.shortcuts import render_to_response
from django.views.decorators.csrf import csrf_exempt
from dxnyy.settings import IMAGES_UPLOAD_DIR,IMAGES_UPLOAD_TEMP_DIR
import os

 

@csrf_exempt
def upload_image(request, encoding='utf-8'): 
    if request.method == 'POST': 
        if "upload_file" in request.FILES: 
            f = request.FILES["upload_file"] 
            parser = ImageFile.Parser()
            for chunk in f.chunks(): 
                parser.feed(chunk) 
            img = parser.close() 
            # 在img被保存之前，可以进行图片的各种操作，在各种操作完成后，在进行一次写操作
            dt = datetime.now()
            cur_dir = '%s_%s_%s' % (dt.year, dt.month, dt.day)
            file_path = os.path.join(IMAGES_UPLOAD_TEMP_DIR[0], cur_dir)
            if not os.path.exists(file_path):
                os.mkdir(file_path)
            file_name = '%s_%s_%s' % (dt.hour, dt.minute, dt.second)
            thumb_fn = file_name + '_min'
            f = os.path.join(file_path, file_name)
            tf = os.path.join(file_path, thumb_fn)
            new_img = img.resize((120, 120), Image.ANTIALIAS)
            new_img.save(tf + '.jpg', 'JPEG')
            img.save(f + '.jpg', 'JPEG')
            return HttpResponse('%s/%s/%s.jpg' % ("http://127.0.0.1:8000/static/uploads", cur_dir, file_name))
    return HttpResponse(u"Some error!Upload faild!格式：jpeg")

3.         urls.py中添加：

(r'^upload_image/', views.upload_image),

 

4.         settings.py中添加：

 IMAGES_UPLOAD_TEMP_DIR = (
    "E:\\soft\\eclipse\\eclipse-jee-indigo-SR2-win32\\workspace\\dxnyy\\static\\uploads\\",
)

IMAGES_UPLOAD_DIR = 'uploads'

 

5.         TinyMCE的初始化配置中，Plugins中加入：advimage

                       如：'plugins': "advimage",