kindeditor image upload function

KindEditor is an open source online HTML editor written in Javascript. Its main user is to allow users to obtain visible and available editing effects on the website. Developers can use KindEditor to enter traditional multi-line text input boxes. (textarea) is replaced with a visual rich text input box

Use

1. to download the latest version of KindEditor from the official website, unzip and copy all files to the static of the project folder. Note that you can delete the following directories as needed:

• ##asp - ASP Program

• asp.net - ASP.NET Program

• php - PHP program

• jsp - JSP program

• examples - Demonstration file

In the HTML template, add the

<code> tag where the rich text editor needs to be displayed: </code><pre class='brush:php;toolbar:false;'><label for="article_body">文章内容</label><textarea id="article_body" name="article_body"></textarea></pre>

Add script , introduce the KindEditor JS file to create a rich text editor for the specified tag. Here we mainly talk about the necessary parameters when using KindEditor to upload pictures:

<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>

Description:

1. The image upload must be uploaded through the

   uploadJson parameter. The url path

2. extraFileUploadParams parameters are used to submit csrf verification

Image upload and preview process:

1. Choose to upload the image in the rich text editor

2. KindEditor Upload the image to the server specified url through AJAX

3. The view function corresponding to this url saves the image and returns a json response containing the image server path

4. KindEditor After getting the response image path, pass The

   src attribute of the tag displays the preview image

##Code implementation in 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))

Description:

1. request.FILES

   Get the image object

2. imgFile. name

   Get the file name

must return a json response containing
3. error

   and url

Define the view function for saving pictures
Configure media (refer to blog) and define routing

The above is the detailed content of kindeditor image upload function. For more information, please follow other related articles on the PHP Chinese website!