Django之在富文本编辑其中添加图片

如何添加富文本编辑器参考点击打开链接

在上文中的config.js为：

KindEditor.ready(function(K) {
        K.create('textarea[name=detail]',{
            width:800,
            height:200,
            uploadJson: '/admin/upload/kindeditor'
        });
});

最后一行是url配置,即文件上传时的url

接下来配置media_root

#Media_url
MEDIA_URL = 'static/images/uploads/'

MEDIA_ROOT = os.path.join(BASE_DIR,'images/upload/') #最后upload后面的 / 一定要加上

接下来配置在urls.py中配置映射

添加：

url(r'uploads/(?P.*)$',
        'django.views.static.serve',
        {'document_root':settings.MEDIA_ROOT,}),
url(r'^admin/upload/(?P[^/]+)$',
        upload_image,name='upload_image'),

到   urlpatterns

接下来配置view 将下面的代码粘贴到views中，再导入到urls中

#coding:utf-8
#!/usr/bin/env python

from django.http import HttpResponse
from django.conf import settings
from django.views.decorators.csrf import csrf_exempt
import os
import uuid
import json
import datetime as dt

@csrf_exempt
def upload_image(request,dir_name):
    result = {'error':1,'message':'上传出错'}
    files = request.FILES.get('imgFile', None)
    if files:
        result = image_upload(files, dir_name)
    return HttpResponse(json.dumps(result),
                        content_type='application/json')

#目录创建
def upload_generation_dir(dir_name):
    # print dir_name, '----dir_name'
    today = dt.datetime.today()
    dir_name = dir_name+'/%d/%d/' %(today.year, today.month)
    if not os.path.exists(settings.MEDIA_ROOT+dir_name):
        os.makedirs(settings.MEDIA_ROOT+dir_name)
    return dir_name

#图片上传
def image_upload(files, dir_name):
    #允许上传的类型
    allow_suffix = ['jpg','png','jpeg','git','bmp']
    file_suffix = files.name.split('.')[-1]
    if file_suffix not in allow_suffix:
        return {'error':1,'message':'图片格式不正确'}
    relative_path_file = upload_generation_dir(dir_name)
    # print relative_path_file, '-----relative_path_file'
    path = os.path.join(settings.MEDIA_ROOT,relative_path_file)
    # print path, '----------path'
    if not os.path.exists(path):
        os.makedirs(path)
    file_name = str(uuid.uuid1())+'.'+file_suffix
    path_file = os.path.join(path,file_name)
    file_url = settings.MEDIA_URL+relative_path_file+file_name
    open(path_file,'wb').write(files.file.read())
    return {'error':0,'url':file_url}

点击添加图片的按钮就可以添加图片到富文本编辑器中了

遇到的错误处理：

csrf_token错误

在kindeditor.js中 4155行处添加;

// NEW CODE  
        var csrfitems = document.getElementsByName("csrfmiddlewaretoken");
        var csrftoken = "";
        if(csrfitems.length > 0)
        {
                 csrftoken = csrfitems[0].value;
         }

        // END

即可。