Django下Ckeditor上传图片的实现

环境：

Python 3.7

Django 2.1

Ckeditor：5.x

步骤1：

下载ckeditor，找到image.js这个文件，搜索“upload”可以找到这一段id:'Upload',hidden:!0。实际上上传功能被隐藏了，把上面的!0改成0，再打开编辑器，就能找到上传功能了。

步骤2：

可以在ckeditor/config.js中配置。加入：config.filebrowserUploadUrl="/uploadimg/";#这个是post图片的URL

步骤3：

写接收的views（如果要对图片进行裁剪等操作，可以使用PIL）

def sceneImgUpload(request):
    if request.method == 'POST':
        callback = request.GET.get('CKEditorFuncNum')
        try:
            path = "static/upload/" + time.strftime("%Y%m%d%H%M%S", time.localtime())
            f = request.FILES["upload"]
            file_name = path + "_" + f.name
            des_origin_f = open(file_name, "wb+")
            for chunk in f.chunks():
                des_origin_f.write(chunk)
            des_origin_f.close()
        except Exception as e:
            print(e)
        res = "<script>window.parent.CKEDITOR.tools.callFunction(" + callback + ",'/" + file_name + "', '');</script>"
        return HttpResponse(res)
    else:
        raise Http404()

步骤4：
如果启用了csrf，会报错。因为ckeditor不会自带csrf，所以要自己添加。

打开ckeditor.js源文件，插入函数：

function getCookie(name){ 
var strCookie=document.cookie; 
var arrCookie=strCookie.split("; "); 
for(var i=0;i<arrCookie.length;i++){ 
var arr=arrCookie[i].split("="); 
if(arr[0]==name)return arr[1]; 
} 
return ""; 
} 

然后搜索：multipart/form-data，会找到一个form，在这个form里面插入：

<input type="hidden" name="csrfmiddlewaretoken" value="'+getCookie("csrftoken")+'">

完成csrf的验证。

续：

因为ckeditor自带是异步提交，如果是自己配置提交上传图片选择框：

<form action="/scene/imgUpload/" method="post" enctype="multipart/form-data">
                            {% csrf_token %}  <!--最好用异步提交(ajaxupload.js)-->
                            <input type="file" name="upload" class="file" />
                            <input type="button" id="imgUploadButton" value="上传"/>
                          </form>

因为默认不是异步提交，如果需要异步提交，这里有2个参考方法：
1：使用插件ajaxupload.js

2：使用iframe

--------------------- 
作者：客栈 
来源：CSDN 
原文：https://blog.csdn.net/ypq5566/article/details/37594371 
版权声明：本文是基于博主 客栈 的《django下ckeditor上传图片的实现》一文进行更改，从而适配更高一版本的ckeditor。