KindEditor

首先导入

<script src="/static/plugins/kindeditor/kindeditor-all.js"></script>


KindEditor模板套用

var editor;
 KindEditor.ready(function (K){
      editor=K.create(
        '#id_contentss',//定位富文本框
        {
            resizeType: 1,
            allowPreviewEmoticons: false,
            allowImageUpload: true,
            items: [
                'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
                'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
                'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
            afterCreate : function() { this.sync(); },//将KindEditor里面写的内容同步到textarea中，这样后台就能获取到
            afterBlur: function(){this.sync();}//如果用form提交的话，就写上标红的部分



        }
)

 });

KindEditor传图片预览

views部分

def laocunzhang(request):
ret = {'status': '','msg': ""}
print(request.POST)
print(request.FILES)
dic = {
'error': 0,
'url': '/static/imgs/4.jpg',
'message': '错误了...'
}

return JsonResponse(dic)

template部分

<script charset="utf-8" src="/static/plugins/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="/static/plugins/kindeditor/lang/zh_CN.js"></script>
<script>
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="content"]', {
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']，

url:'/laocunzhang'
});
});
</script>

在前端获取KindEditor中的值通过editor.html()