kindeditor图片上传功能

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

使用

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

• asp - ASP程序

• asp.net - ASP.NET程序

• php - PHP程序

• jsp - JSP程序

• examples - 演示文件

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

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

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

<script src="{% static &#39;kindeditor-4.1.10/kindeditor-all-min.js&#39; %}"></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验证

图片的上传和预览流程：

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

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

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

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

Django中的代码实现：

from django.conf.urls import urlfrom app import views

urlpatterns = [
    url(r'^upload/$', views.upload_file, name='upload_file'),

    url(r&#39;^media/(?P<path>.*)$&#39;, serve, {&#39;document_root&#39;: settings.MEDIA_ROOT}),  # 配置media路由]

def upload_file(request):
    # 拿到文件，保存在指定路径
    print(request.FILES) # {&#39;imgFile&#39;: [<InMemoryUploadedFile: QQ图片20170523192846.jpg (image/jpeg)>]}
    imgFile = request.FILES.get(&#39;imgFile&#39;)  # 拿到文件对象，imgFile.name, 拿到文件名

    with open(&#39;app01/media/upload/img/&#39;+imgFile.name,&#39;wb&#39;)as f:   # with open 无法创建文件夹，需要自己创建
        for chunk in imgFile.chunks():
            f.write(chunk)    # 返回json响应
    response = {        
    &#39;error&#39;: 0,        &#39;url&#39;: &#39;/media/upload/img/&#39;+imgFile.name        # 客户端拿到路径，才能预览图片; media在setting中配置了别名，这里只写media，客户端就可以找到路径，前面不需要加/app
    }    return HttpResponse(json.dumps(response))

说明：

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

2. imgFile.name拿到文件名

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

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

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

Atas ialah kandungan terperinci kindeditor图片上传功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!