首先导入
<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()
 






转载于:https://www.cnblogs.com/wangtc/p/10728336.html

使用

复制kindEditor文件夹到项目
• 导入外部kindEditor
• <script type="text/javascript" src="editor/kindeditor.js"></script>
• 使用My97DatePicker
• <script type="text/javascript“>KE.show({id : 'contents'});</script>


下载及演示地址

http://kindeditor.net/demo.php