KindEditor 文本編輯器引用和如何上傳圖片

官方地址  用於kindEditor下載和使用指導

 如何引用

 

 

  <form action="" method="post">
                    <div><h4>添加文章</h4>
                        <p><label for=""> 標題</label></p>
                        <input name='title' type="text">
                    </div>
                    <div><p>內容：(kindEditor編輯器，支持拖放/粘貼上傳圖片) )</p>
                        <textarea name="content" id="editor_id" cols="30" rows="10"></textarea>
                    </div>
                    <div>
                        {% for categoty in categoty_list %}
                            <span>{{ categoty }}</span>
                        {% endfor %}

                    </div>
                    <input type="submit" class="btn-primary btn">
                    {% csrf_token %}
     </form>

 

如何引入文本編輯框和 如何配置

{#    要想使用文本編輯器先要引入文本編輯器  他也是屬於js文件   這個js文件可以在網址上下載#}
    <script src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create("#editor_id", {
                width: '700px', 設置框的寬度
                height: '400px',  設置框的長度   這里設置的長寬優先級高於 textarea
{#                當上傳文件如上傳圖片的時候，文件會走這個路徑上傳內容過去#}
                uploadJson: "/upload_file/",
{#                上傳文件是post請求，所以一定要加上這個csrf_tokent 而extraFileUploadParams可以上傳這些數據#}  相見下邊的解釋
                extraFileUploadParams: {"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
{#                這個是用於指定上傳的圖片的鍵  傳過去的內容是以鍵值對的形式存在#}
               filePostName: 'upload_img'
            })
        })
    </script>

 具體代碼

{% extends 'temp1.html' %}
{#在這兒一定要寫上這句話來加載自定義的templatetag文件#}
{% load my_tags %}
{% block page %}
    <div class="blog_title">
        <span>{{ request.user }}</span>
        <ul class="ul1" type="none">
            <a href="/app01/{{ request.user.username }}/guanli/">
                <li>管理</li>
            </a>
            <li>收藏</li>
            <li>操作</li>
        </ul>
    </div>
    你好》》{{ request.user }}
    <div class="container">
        <div class="row">
            {#        左側菜單#}
            <div class="col-md-3">
                <a href="/app01/{{ request.user.username }}/add_art">添加</a>

                {#     執行函數，傳入username數據 #}
                {% get_archive_style username %}
                {#            他會返回渲染好的HTML文件#}
            </div>

            {#        文章#}
            <div class="col-md-6">
                <form action="" method="post">
                    <div><h4>添加文章</h4>
                        <p><label for=""> 標題</label></p>
                        <input name='title' type="text">
                    </div>
                    <div><p>內容：(kindEditor編輯器，支持拖放/粘貼上傳圖片) )</p>
                        <textarea name="content" id="editor_id" cols="30" rows="10"></textarea>
                    </div>
                    <div>
                        {% for categoty in categoty_list %}
                            <span>{{ categoty }}</span>
                        {% endfor %}

                    </div>
                    <input type="submit" class="btn-primary btn">
                    {% csrf_token %}
                </form>


            </div>
            {#        右側對象#}
            <div class="col-md-3"></div>
        </div>

    </div>
{#    要想使用文本編輯器先要引入文本編輯器  他也是屬於js文件   這個js文件可以在網址上下載#}
    <script src="/static/kindeditor/kindeditor-all.js"></script>
    <script>
        KindEditor.ready(function (K) {
            window.editor = K.create("#editor_id", {
                width: '700px',
                height: '400px',
{#                當上傳文件的時候，文件會自己走這個路徑上傳內容過去#}
                uploadJson: "/upload_file/",
{#                上傳文件是post請求，所以一定要加上這個csrf_tokent 而extraFileUploadParams可以上傳這些數據#}
                extraFileUploadParams: {"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
{#                這個是用於指定上傳的圖片的件#}
                filePostName: 'upload_img'
            })
        })
    </script>

{% endblock %}

 

 

用文本編輯器上傳文件

視圖函數中的寫法 

def upload_file(request):
    print(request.FILES)
    # 打印上傳的文件的得到如下的值，可以知道在HTML中配置的 filePostName: 'upload_img' 生效了
    # 打印的效果<MultiValueDict: {'upload_img': [<InMemoryUploadedFile: each2.png (image/png)>]}>打印的記過如下
    # 獲取上傳的文件對象  即 upload_img 鍵對應的值
    obj=request.FILES.get('upload_img') print(type(obj))

    from django.core.files.uploadedfile import InMemoryUploadedFile
    from day77博客項目 import settings
    import os
    # 利用之前配置好的MEDIA路徑，將上傳的文件放到MEDIA文件夾下的'article_imgs'文件夾下，文件的名字就是上傳過來的文件的名字
    path=os.path.join(settings.MEDIA_ROOT,'article_imgs',obj.name)  #拼接好路徑和名字 # 將文件寫到這個位置中去
    with open(path,'wb') as f_write:
        # obj.chunks()就是指的是上傳的具體數據
        for chunk in obj.chunks():
            # 這里的chunk就是指的上傳的文件的具體的數據
            f_write.write(chunk)

    # 返回信息，信息是一個字典，
    upload_response={
        # 第一個參數表示沒有錯誤，返回0
        'error':0,
        # 這個是路徑，將問價路徑加上 obj.name的具體形式返回回去，HTML端就可以通過url來查看圖片
（因為存放在MEDIA文件夾中，之前配置好了他可以通過url訪問，所以能在頁端查看）
        'url':'/media/article_imgs/%s'%obj.name
    }
    import json
    return HttpResponse(json.dumps(upload_response))

   具體代碼

def upload_file(request):
    print(request.FILES)
    # 打印上傳的文件的得到如下的值，可以知道在HTML中配置的 filePostName: 'upload_img' 生效了
    # <MultiValueDict: {'upload_img': [<InMemoryUploadedFile: each2.png (image/png)>]}>打印的記過如下
    # 獲取上傳的文件對象  即 upload_img 鍵對應的值
    obj=request.FILES.get('upload_img')
    print(type(obj))

    from django.core.files.uploadedfile import InMemoryUploadedFile
    from day77博客項目 import settings
    import os
    # 利用之前配置好的MEDIA路徑，將上傳的文件放到MEDIA文件夾下的'article_imgs'文件夾下，文件的名字就是上傳過來的文件的名字
    path=os.path.join(settings.MEDIA_ROOT,'article_imgs',obj.name)
    # 將文件寫到這個位置中去
    with open(path,'wb') as f_write:
        # obj.chunks()就是指的是上傳的具體數據
        for chunk in obj.chunks():
            # 這里的chunk就是指的上傳的文件的具體的數據
            f_write.write(chunk)

    # 返回信息，信息是一個字典，
    upload_response={
        # 第一個參數表示沒有錯誤，返回0
        'error':0,
        # 這個是路徑，將問價路徑加上 obj.name的具體形式返回回去，HTML端就可以通過url來查看圖片（因為存放在MEDIA文件夾中，之前配置好了他可以通過url訪問，所以能在頁端查看）
        'url':'/media/article_imgs/%s'%obj.name
    }
    import json
    return HttpResponse(json.dumps(upload_response))