富文本编译器+文件上传（81）

kindeditor

<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#article_content',{
                    width:"900",
                    height:"500px",
                    resizeType:0,
                    uploadJson:"/upload/",
                    extraFileUploadParams:{
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                    }
                });
        });
</script>

详细的各参数：

http://kindeditor.net/docs/option.html

urls.py

加上

re_path('upload/',views.upload),

views.py

from Admin import settings　　//是为了可以直接使用media的路径
import os
def upload(request):
    //print(request.FILES)
    obj = request.FILES.get('imgFile')  # 默认叫imgFile

    path = os.path.join(settings.MEDIA_ROOT,"add_article_img",obj.name)

　　//下载
    with open(path,"wb") as f:
        for line in obj:
            f.write(line)

    res = {
        'error':0,
        "url":"/media/add_article_img/"+obj.name
    }

    return JsonResponse(res)
　　//注意只有这样return，才能够使上传的图片直接在文本编辑框中显示出来

另外：

获取文件名：

filename=request.FILES["upload_file"].name
# 等价于filename1=request.FILES.get("upload_file").name
获取文件内容：

request.FILES["upload_file"].chunks()

add_article.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
    <style>
        * {
            margin: 0;
        }

        .header {
            width: 100%;
            height: 60px;
            background-color: #369;
        }

        .content {
            width: 80%;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<div class="header"></div>
<div class="content">
    <h3>添加文章</h3>
    <form action="" method="post">
        {% csrf_token %}
        <div>
            <label for="title">文章标题</label>
            <input type="text" id="title" name="title" class="form-control" style="width: 200px;">
        </div>
        <div>
            <p>内容: </p>
            <textarea name="article_content" id="article_content" cols="60" rows="20"></textarea>
        </div>
        <input type="submit" class="btn btn-info">
    </form>
</div>

<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#article_content',{
                    width:"900",
                    height:"500px",
                    resizeType:0,
                    uploadJson:"/upload/",
                    extraFileUploadParams:{
                        csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val()
                    }
                });
        });
</script>

<script src="{% static 'jquery-3.2.1.min.js' %}"></script>
<script src="{% static 'setupajax.js' %}"></script>
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'gt.js' %}"></script>
</body>
</html>

 

posted @ 2020-05-27 10:08  my_Sunday  阅读(218)  评论(0)  编辑  收藏  举报