zoukankan html css js c++ java

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

kindeditor

<script charset="utf-8" src="/static/kindeditor/kindeditor-all.js"></script>
<script>
        KindEditor.ready(function(K) {
                window.editor = K.create('#article_content',{
                    "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 {
             100%;
            height: 60px;
            background-color: #369;
        }

        .content {
             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=" 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',{
                    "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>

查看全文

相关阅读:
一本书
 在linux oracle 10g/11g x64bit环境中，goldengate随os启动而自己主动启动的脚本
 关于仿酷狗音乐播放器开源：寻求一套音乐播放器素材，让仿酷狗开源
 Cocos2d-x中Vector<T>容器以及实例介绍
 成都传智播客Java/PHP培训就业率高
 P1341 无序字母对
 P1168 中位数
 P1146 硬币翻转
 P1340 兽径管理
 P2023 [AHOI2009]维护序列

原文地址：https://www.cnblogs.com/liujie12/p/12970811.html