后台文本编辑器KindEditor介绍
我们在自己的个人主页添加文章内容的时候，需要对文章内容进行修饰，此时就需要文本编辑器助阵了！
功能预览
KindEditor文本编辑器
本文简单介绍下KindEditor的引入、主要的参数以及上传文件等功能。
KindEditor的引入
在官网下载好编辑器文件后，我们把它放在项目的static/blog目录下，如下图所示：
那么在我们需要调用编辑器的模板中加入相应的script标签就好了
<script src="/static/blog/jquery-1.12.4.js"></script>
<script charset="utf-8" src="/static/blog/kindeditor/kindeditor-all.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id',{
//待填充内容
});
});
</script>
这里需要注意两点：
一:需要先引入Jquery。
二:这里的'#editor_id'是Jquery的id选择器，选取的是id为eidtor_id的textarea，因此我们在上面必须得定义一个id为editor_id的textarea来做本编辑器的“容器”：
<textarea name="content" id="article_content1" cols="30" rows="10"></textarea>
KindEditor的参数
这里简单介绍几个：
下面是本系统的编辑器参数
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id',{
width:"800",
height:"600",
resizeType:0,
uploadJson:"/upload/",
extraFileUploadParams:{
csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(),
username:'{{ request.user.username }}'
},
filePostName:"upload_img"
});
});
</script>
宽度与高度是上面的width与height。
还有一个items，它表示编辑器的各种功能按钮，默认不写的情况下所有功能都展示，可以根据实际需求加载相应的功能模块。
resizeType代表编辑框能否拖动高度与宽度；参数为0表示不可改变，参数为1代表只能改变高度，参数为2表示可以同时改变高度与宽度。
uploadJson与filePostName是与文件上传相关的参数，接下来会详细讲述。
extraFileUploadParams是将数据传给后台功能的参数，这里需要注意为了防止页面上报csrftoken错误，需要将csrf中间件生成的input标签的值传给后台！
KindEditor的文件上传
我们上面介绍的uploadJson参数就是制定文件上传的路由的，本例指定的是'/upload/'。
接着我们需要在路由中新建一条文件上传的路由：
path('upload/', views.upload),
然后在视图函数中创建相应的视图函数
##编辑器上传图片
def upload(request):
print(request.FILES)
img_obj = request.FILES.get("upload_img")
print(img_obj.name)
#MEDIA_ROOT = os.path.join(BASE_DIR,'media')
path = os.path.join(settings.MEDIA_ROOT, "add_article_img", img_obj.name)
with open(path, "wb") as f:
for line in img_obj:
f.write(line)
return HttpResponse("ok")
这样，我们就可以在编辑器中上传图片了。需要提醒大家的一点是，文件最终上传的目录是上面代码中path变量中指定的文件目录。