Python开发Django框架后台admin模板页面使用Kindeditor遇到的一些问题及解决方法：1、post请求上传图片失败 2、样式冲突

Python开发Django框架后台admin模板页面使用Kindeditor遇到的一些问题及解决方法：1、post请求上传图片失败 2、样式冲突

1、post请求上传图片失败

当项目配置文件settings.py中包含如下配置的时

# CSRF防御中间件,增加防御保护以防止跨站伪造请攻击。通过向表单Post请求中添加隐藏表单字段以及对请求进行检查以获取正确的值。
    'django.middleware.csrf.CsrfViewMiddleware',

post请求中需要有 csrfmiddlewaretoken=“{{ csrf_token }}” 或者 {% csrf_token %}
Kindeditor在django框架后台admin模板页面使用，参考以下配置
admins.py

    class Media:
        js = (
            # 这是在后台新闻添加/修改的页面中追加js文件，富文本框，显示新闻内容内容
            '/static/kindeditor/kindeditor-all.js',  # 主js文件
            '/static/kindeditor/lang/zh-CN.js',  # 语言：中文
            '/static/kindeditor/config1.js',  # kindeditor富文本框主配置文件
        )

config1.js

//后台管理员新闻添加/修改页面，新闻内容富文本框开始
KindEditor.ready(function(K){
    var editor = K.create('#id_content', {
        loadStyleModetrue: false,
        width: '80%',
        height: '400px',
        resizeMode: 1, //编辑器只能调整高度
        allowPreviewEmoticons: true,
        allowImageUpload: true,//是否允许本地上传
        uploadJson: '/kindeditorUploadImages',//上传图片请求地址
        //readonlyMode: true,//只读模式
        items: [
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', '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', '|',
                'emoticons', 'image', '|', 'about'
        ]
    });
});
//富文本框结束

以上配置会出现缺少csrf参数异常，所以需要修改config1.js文件，添加图片上传post请求的csrf参数

//后台管理员新闻添加/修改页面，新闻内容富文本框开始
KindEditor.ready(function(K){
    var editor = K.create('#id_content', {
        loadStyleModetrue: false,
        width: '80%',
        height: '400px',
        resizeMode: 1, //编辑器只能调整高度
        allowPreviewEmoticons: true,
        allowImageUpload: true,//是否允许本地上传
        uploadJson: '/kindeditorUploadImages',//上传图片请求地址
        extraFileUploadParams: {
            'csrfmiddlewaretoken': $("input[name='csrfmiddlewaretoken'][type='hidden']").val() //额外参数
        },
        //readonlyMode: true,//只读模式
        items: [
                'source', '|', 'undo', 'redo', '|', 'preview', 'print', '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', '|',
                'emoticons', 'image', '|', 'about'
        ]
    });
});
//富文本框结束

2、样式冲突

这是因为Django框架后台admin模板页面样式与Kindeditor样式冲突，可通过在网页中审查元素确定影响元素的css样式，并重新定义css样式
admins.py

    class Media:
        css = {
            'all': ('/static/kindeditor/config-css.css', )  # simple-ui样式与kindeditor样式有部分冲突，重新定义
        }
        js = (
            # 这是在后台新闻添加/修改的页面中追加js文件，富文本框，显示新闻内容内容
            '/static/kindeditor/kindeditor-all.js',  # 主js文件
            '/static/kindeditor/lang/zh-CN.js',  # 语言：中文
            '/static/kindeditor/config1.js',  # kindeditor富文本框主配置文件
        )

config-css.css

.ke-dialog-content .ke-button {
     padding: 0 14px 0 12px;
     color: #333;
}

.ke-dialog-content .ke-button:hover {
     background: url(./themes/default/background.png) no-repeat;
}

.ke-dialog-content .ke-button-common {
     background: url(./themes/default/background.png) no-repeat;
}

.ke-dialog-content ul li{
    list-style-type: unset;
}