kindeditor编辑器下载地址
http://kindeditor.net/docs/index.html
django中插入编辑器,首先看看成果
setting 中配置文件:
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'static'),
]
MEDIA_ROOT=os.path.join(BASE_DIR,'media')
MEDIA_URL = '/media/'
要植入编辑器的textarea生成视图:
def new_edit(request):
form = NewModelForm()
if request.method == "POST":
form = NewModelForm(request.POST)
if form.is_valid():
form.save()
return HttpResponse('发表成功!')
return render(request,'new_edit.html',{'forms':form})
form生成的textarea框id , 找到要植入编辑器的编辑器
模板层 :
<script charset="utf-8" src="/static/kindeditor/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="/static/kindeditor/kindeditor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function (K) {
{# textarea输入框标签选择器#}
window.editor = K.create('textarea输入框id', {
uploadJson: '/upload/',
'100%',
height: '500px',
extraFileUploadParams: {
csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val()
},
afterBlur: function () {
this.sync();
},
{# 这里相当与将文本编辑器保存不加传不到后端#}
});
});
</script>
模板层只需做这一步就可以 ,如果单纯的是文本输入 那么 这样已经是可以做到了,
如果涉及到图片上传下载 那么 ,添加图片的上传和路由
路由层:
path('upload/', views.upload),#上传图片路由
re_path(r'media/(?P<path>.*)$', serve, {'document_root': settings.MEDIA_ROOT}),#访问静态文件请求走这里
视图:.
将FILES管道取出图片转换成json格式
def upload(request):
img = request.FILES.get('imgFile')
path = os.path.join(settings.MEDIA_ROOT,'add_article_img',img.name)
with open(path,'wb')as f:
for line in img:
f.write(line)
response={
'error':0,
'url':'/media/add_article_img/%s'%(img.name)
}
return HttpResponse(json.dumps(response))
这样操作等于把客户端图片写到 服务器 然后访问的时候实际上是在读服务端存的图片
以上
!