参考 http://kindeditor.net/docs/usage.html
1 下载软件
2 设置setting.py
STATICFILES_DIRS=[ os.path.join(BASE_DIR,"static"), ] # 告诉djanjo项目用户上传的文件保存在哪个目录下 MEDIA_ROOT = os.path.join(BASE_DIR, "upload") # 告诉用户用哪个前缀来访问刚才的定义的那个目录 MEDIA_URL = "/media/"
3 设置url
# 给用户上传的那些文件路径做认证上传头像的 url(r'^media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}), # 富文本编辑器里面上传的图片的存放目录 url(r'^fault-report/upload-img/$', views.upload_img),
# 显示富文本的页面 url(r'^index/$', views.index),
4 views设置：
from django.http import JsonResponse # json格式 # Create your views here. # 富文本编辑器上传图片的视图 def upload_img(request): print(request.FILES) res = {"error": 0} # 这是固定写法，必须用error file_obj = request.FILES.get("imgFile") file_path = os.path.join("upload", "report_images", file_obj.name) # 将文件保存在本地 with open(file_path, "wb") as f: for chunk in file_obj.chunks(): f.write(chunk) # 将上传文件的url返回给富文本编辑器 res["url"] = "/media/report_images/{}".format(file_obj.name) return JsonResponse(res) def index(request): return render(request, "index.html", locals())
5 在项目里新建目录upload,然后再在下面简历report_images,这个目录就是存放上传的图片的
6 index页面设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" method="post"> {% csrf_token %} <div class="form-group"> <label for="content">内容</label> <textarea class="form-control" name="content" id="content" rows="20"></textarea> </div> </form> <script src="/static/jquery-3.3.1.min.js"></script> <script charset="utf-8" src="/static/kindeditor/kindeditor-all-min.js"></script> <script charset="utf-8" src="/static/kindeditor/lang/zh-CN.js"></script> <script> KindEditor.ready(function (K) { window.editor = K.create('#content', { uploadJson: "/fault-report/upload-img/", extraFileUploadParams: { // 上传文件时额外传递的参数 csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(), } }); }); </script> </body> </html>
7 最后就可以上传图片了