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>