官方地址 用于kindEditor下载和使用指导
如何引用
<form action="" method="post">
<div><h4>添加文章</h4>
<p><label for=""> 标题</label></p>
<input name='title' type="text">
</div>
<div><p>内容：(kindEditor编辑器，支持拖放/粘贴上传图片) )</p>
<textarea name="content" id="editor_id" cols="30" rows="10"></textarea>
</div>
<div>
{% for categoty in categoty_list %}
<span>{{ categoty }}</span>
{% endfor %}
</div>
<input type="submit" class="btn-primary btn">
{% csrf_token %}
</form>
如何引入文本编辑框和 如何配置
{# 要想使用文本编辑器先要引入文本编辑器 他也是属于js文件 这个js文件可以在网址上下载#}
<script src="/static/kindeditor/kindeditor-all.js"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create("#editor_id", {
width: '700px', 设置框的宽度
height: '400px', 设置框的长度 这里设置的长宽优先级高于 textarea
{# 当上传文件如上传图片的时候，文件会走这个路径上传内容过去#}
uploadJson: "/upload_file/",
{# 上传文件是post请求，所以一定要加上这个csrf_tokent 而extraFileUploadParams可以上传这些数据#} 相见下边的解释
extraFileUploadParams: {"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
{# 这个是用于指定上传的图片的键 传过去的内容是以键值对的形式存在#}
filePostName: 'upload_img'
})
})
</script>具体代码
{% extends 'temp1.html' %}
{#在这儿一定要写上这句话来加载自定义的templatetag文件#}
{% load my_tags %}
{% block page %}
<div class="blog_title">
<span>{{ request.user }}</span>
<ul class="ul1" type="none">
<a href="/app01/{{ request.user.username }}/guanli/">
<li>管理</li>
</a>
<li>收藏</li>
<li>操作</li>
</ul>
</div>
你好》》{{ request.user }}
<div class="container">
<div class="row">
{# 左侧菜单#}
<div class="col-md-3">
<a href="/app01/{{ request.user.username }}/add_art">添加</a>
{# 执行函数，传入username数据 #}
{% get_archive_style username %}
{# 他会返回渲染好的HTML文件#}
</div>
{# 文章#}
<div class="col-md-6">
<form action="" method="post">
<div><h4>添加文章</h4>
<p><label for=""> 标题</label></p>
<input name='title' type="text">
</div>
<div><p>内容：(kindEditor编辑器，支持拖放/粘贴上传图片) )</p>
<textarea name="content" id="editor_id" cols="30" rows="10"></textarea>
</div>
<div>
{% for categoty in categoty_list %}
<span>{{ categoty }}</span>
{% endfor %}
</div>
<input type="submit" class="btn-primary btn">
{% csrf_token %}
</form>
</div>
{# 右侧对象#}
<div class="col-md-3"></div>
</div>
</div>
{# 要想使用文本编辑器先要引入文本编辑器 他也是属于js文件 这个js文件可以在网址上下载#}
<script src="/static/kindeditor/kindeditor-all.js"></script>
<script>
KindEditor.ready(function (K) {
window.editor = K.create("#editor_id", {
width: '700px',
height: '400px',
{# 当上传文件的时候，文件会自己走这个路径上传内容过去#}
uploadJson: "/upload_file/",
{# 上传文件是post请求，所以一定要加上这个csrf_tokent 而extraFileUploadParams可以上传这些数据#}
extraFileUploadParams: {"csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken']").val()},
{# 这个是用于指定上传的图片的件#}
filePostName: 'upload_img'
})
})
</script>
{% endblock %}
用文本编辑器上传文件
视图函数中的写法
def upload_file(request):
print(request.FILES)
# 打印上传的文件的得到如下的值，可以知道在HTML中配置的 filePostName: 'upload_img' 生效了
# 打印的效果<MultiValueDict: {'upload_img': [<InMemoryUploadedFile: each2.png (image/png)>]}>打印的记过如下
# 获取上传的文件对象 即 upload_img 键对应的值
obj=request.FILES.get('upload_img')
print(type(obj))
from django.core.files.uploadedfile import InMemoryUploadedFile
from day77博客项目 import settings
import os
# 利用之前配置好的MEDIA路径，将上传的文件放到MEDIA文件夹下的'article_imgs'文件夹下，文件的名字就是上传过来的文件的名字
path=os.path.join(settings.MEDIA_ROOT,'article_imgs',obj.name) #拼接好路径和名字
# 将文件写到这个位置中去
with open(path,'wb') as f_write:
# obj.chunks()就是指的是上传的具体数据
for chunk in obj.chunks():
# 这里的chunk就是指的上传的文件的具体的数据
f_write.write(chunk)
# 返回信息，信息是一个字典，
upload_response={
# 第一个参数表示没有错误，返回0
'error':0,
# 这个是路径，将问价路径加上 obj.name的具体形式返回回去，HTML端就可以通过url来查看图片
（因为存放在MEDIA文件夹中，之前配置好了他可以通过url访问，所以能在页端查看）
'url':'/media/article_imgs/%s'%obj.name
}
import json
return HttpResponse(json.dumps(upload_response))具体代码
def upload_file(request):
print(request.FILES)
# 打印上传的文件的得到如下的值，可以知道在HTML中配置的 filePostName: 'upload_img' 生效了
# <MultiValueDict: {'upload_img': [<InMemoryUploadedFile: each2.png (image/png)>]}>打印的记过如下
# 获取上传的文件对象 即 upload_img 键对应的值
obj=request.FILES.get('upload_img')
print(type(obj))
from django.core.files.uploadedfile import InMemoryUploadedFile
from day77博客项目 import settings
import os
# 利用之前配置好的MEDIA路径，将上传的文件放到MEDIA文件夹下的'article_imgs'文件夹下，文件的名字就是上传过来的文件的名字
path=os.path.join(settings.MEDIA_ROOT,'article_imgs',obj.name)
# 将文件写到这个位置中去
with open(path,'wb') as f_write:
# obj.chunks()就是指的是上传的具体数据
for chunk in obj.chunks():
# 这里的chunk就是指的上传的文件的具体的数据
f_write.write(chunk)
# 返回信息，信息是一个字典，
upload_response={
# 第一个参数表示没有错误，返回0
'error':0,
# 这个是路径，将问价路径加上 obj.name的具体形式返回回去，HTML端就可以通过url来查看图片（因为存放在MEDIA文件夹中，之前配置好了他可以通过url访问，所以能在页端查看）
'url':'/media/article_imgs/%s'%obj.name
}
import json
return HttpResponse(json.dumps(upload_response))本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
