参考 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 最后就可以上传图片了