kindeditor图片上传功能
作者: default|标签:Kindeditor 功能 图片|2018-5-16 13:33

KindEditor是一款用Javascript编写的开源在线HTML编辑器,主要用户是让用户在网站上获得可见即可得的编辑效果,开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框

使用

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

    • asp - ASP程序

    • asp.net - ASP.NET程序

    • php - PHP程序

    • jsp - JSP程序

    • examples - 演示文件

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

    <label for="article_body">文章内容</label><textarea id="article_body" name="article_body"></textarea>
  3. 添加脚本,引入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验证

  4. 图片的上传和预览流程:

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

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

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

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

  5. 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. 必须返回包含errorurl的json响应

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

    5. 配置media(参考博客)并定义路由

以上就是kindeditor图片上传功能的详细内容,更多请关注php中文网其它相关文章!

520
点赞
收藏
分享:
0/300