kindeditor图片上传功能

使用

1. 到官网下载 KindEditor 最新版本，解压后将所有文件拷贝到项目的static文件夹下。注意，可以根据需要删除以下目录：

2. asp - ASP程序

3. asp.net - ASP.NET程序

4. php - PHP程序

5. jsp - JSP程序

6. examples - 演示文件

7. HTML模板中需要显示富文本编辑器的位置添加<textarea>标签：

   <label for="article_body">文章内容</label><textarea id="article_body" name="article_body"></textarea>

8. 添加脚本，引入KindEditor JS文件，为指定标签创建富文本编辑器。这里主要说使用KindEditor 上传图片时的必要参数：

   <script src="{% static 'kindeditor-4.1.10/kindeditor-all-min.js' %}"></script><script>
    var options = {
    resizeType: 0,
    uploadJson: "/upload/", //指定图片上传的url路径，server端写一个视图来处理上传的图片
    extraFileUploadParams: { "csrfmiddlewaretoken": "{{ csrf_token }}"
    }
    };
    KindEditor.create("#article_body", options); //为指定元素创建富文本编辑器</script>

   说明：

1. 图片上传要通过uploadJson参数指定上传的url路径

2. extraFileUploadParams参数用于提交csrf验证

9. 图片的上传和预览流程：

1. 在富文本编辑器中选择上传图片

2. KindEditor 将图片通过AJAX的方式上传到服务器指定url

3. 该url对应的视图函数保存图片，并返回包含图片服务器路径的json响应

4. KindEditor 拿到响应的图片路径后，通过<img>标签的src属性，显示预览图片

10. Django中的代码实现：

    from django.conf.urls import urlfrom app import views
    
    urlpatterns = [
     url(r'^upload/$', views.upload_file, name='upload_file'),
    
     url(r'^media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}), # 配置media路由]

    def upload_file(request):
     # 拿到文件，保存在指定路径
     print(request.FILES) # {'imgFile': [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]}
     imgFile = request.FILES.get('imgFile') # 拿到文件对象，imgFile.name, 拿到文件名
    
     with open('app01/media/upload/img/'+imgFile.name,'wb')as f: # with open 无法创建文件夹，需要自己创建
     for chunk in imgFile.chunks():
     f.write(chunk) # 返回json响应
     response = { 
     'error': 0, 'url': '/media/upload/img/'+imgFile.name # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
     } return HttpResponse(json.dumps(response))

    说明：

1. request.FILES中拿到图片对象

2. imgFile.name拿到文件名

3. 必须返回包含error和url的json响应

4. 定义保存图片的视图函数

5. 配置media（参考博客）并定义路由