今天用到了kindeditor,使用在django中,前端配置代码如下
<script>
KindEditor.ready(function (K) {
window.editor = K.create('#id_content', {
width: '80%',
height: '600px',
{#items: [#}
{# 'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',#}
{# 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',#}
{# 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',#}
{# 'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',#}
{# 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',#}
{# 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',#}
{# 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',#}
{# 'anchor', 'link', 'unlink', '|', 'about'#}
{#],#}
resizeType: 1,
uploadJson: '/upload_image/', // 上传图片的后端提交路径
extraFileUploadParams: {
'csrfmiddlewaretoken': '{{ csrf_token }}'
}
});
});
script>
url配置如下
# 编辑器上传图片接口
url(r'^upload_image/', views.upload_image),
views中方法如下:
def upload_image(request):
"""
//成功时
{
"error" : 0,
"url" : "http://www.example.com/path/to/file.ext"
}
//失败时
{
"error" : 1,
"message" : "错误信息"
}
:param request:
:return:
"""
back_dic = {'error':0,} # 先提前定义返回给编辑器的数据格式
# 用户写文章上传的图片 也算静态资源,也应该放在media文件夹下
if request.method == 'POST':
# 获取用户上传的图片对象
# print(request.FILES) # 打印看到了键固定叫imgFile
file_obj = request.FILES.get('imgFile')
print(file_obj)
# 手动拼接存储文件的路径
file_dir = os.path.join(settings.BASE_DIR, 'media', 'article_img')
# 优化操作,先判断当前文件夹是存在,不存在,自动创建
if not os.path.isdir(file_dir):
os.mkdir(file_dir) # 创建一层目录结构 article_img
# 拼接图片的完整路径
file_path = os.path.join(file_dir, file_obj.name)
with open(file_path, 'wb') as f:
for line in file_obj:
f.write(line)
back_dic['url'] = '/media/article_img/%s'%file_obj.name
print(type(back_dic['error']))
return JsonResponse(back_dic)
我是跟着教学视频敲的,视频中是没有问题的,到我这就一直弹出一个atler框
127.0.0.1显示undefined。
百度找了一阵子,没啥用,自己就直接输入http://127.0.0.1:8000/upload_image/发现是进不来的,自己就寻思着应该是url被顶替了,就将这个url放到前面一点,发现成功了!
有类似问题的小伙伴可以参考一下!