KindEditor是一款还不错的开源的HTML可视化编辑器，主要用于让用户在网站上获得所见即所得编辑效果，兼容IE、Firefox、Chrome、Safari、Opera等主流浏览器。之所以推荐这一款编辑器，是因为它非常的轻量化，也不需要安装，从而耦合度非常低，无论是使用表单提交内容还是异步提交，都非常方便，这里简单介绍一下如何在Django2.0.4中使用这款富文本编辑器。
解压后，删除掉一些没有用的文件，只留下lang(语言包) themes(风格包) plugins(插件) 和 kindeditor-all-min.js
将kindeditor文件夹放到项目目录的static/js文件中去
最后在页面中就可以使用了
<!DOCTYPE html>
{# 加载静态文件 #}
{% load static %}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>首页</title>
{# 载入js库 #}
<script src='{% static "js/jquery-1.12.1.min.js" %}'></script>
<script src='{% static "js/kindeditor/kindeditor-all-min.js" %}'></script>
</head>
<body>
<textarea id='content'>富文本</textarea>
<button onclick="checkit()">查看</button>
<script>
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);
}
</script>
</body>
</html>
需要注意的一点是，如果你要异步将富文本内容提交给后台，就需要动态获取富文本的内容，那么需要这样写
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')