{# 加载静态文件 #}
{% load static %}
首页
{# 载入js库 #}
富文本
查看
initKindEditor();
function initKindEditor() {
var kind = KindEditor.create('#content', {
uploadJson:'/md_admin/imageupload',
width: '100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度(数字)
minHeight: 400 // 最小高度(数字)
});
}
function checkit(){
var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
alert(content);
}
需要注意的一点是，如果你要异步将富文本内容提交给后台，就需要动态获取富文本的内容，那么需要这样写
var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
而使用 传统的 $("#content").val() 是获取不到html标签的
另外如果你想利用富文本编辑器上传文件到本地，前端需要添加配置：uploadJson:'/md_admin/imageupload'
后台文件上传代码：
#kindeditor上传方法
def imageupload(request):
if request.method == 'POST':
item = {}
file = request.FILES.get('imgFile')
f = open(os.path.join(UPLOAD_ROOT,'',file.name),'wb')
item['message'] = '上传成功'
item['url'] = 'http://localhost:8000/upload/'+ file.name
item['error'] = 0
#写文件 遍历图片文件流
for chunk in file.chunks():
f.write(chunk)
return HttpResponse(json.dumps(item,ensure_ascii=False),content_type='application/json')
