django下ckeditor上传图片的实现

环境：django 1.6
ckeditor：4.x

步骤1：

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

步骤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, 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