django 整合 kindeditor ，解决上传图片 csrf 验证问题

方法一：修改 kindeditor.js 文件

django  在整合任何的在线编辑器的时候，上传图片通常都会遇到一个csrf 验证失败的错误。

我以前的解决方法是  ,但是那始终是不安全的。还好找到了新的解决方法 ，伟大的 stackoverflow

以kindeditor 为例，找到主 js文件 ，如：

/home/ubuntu/ndis/static/editor/kindeditor/kindeditor.js打开，


        // NEW CODE
        var csrfitems = document.getElementsByName("csrfmiddlewaretoken");
        var csrftoken = "";
        if(csrfitems.length > 0)
        {
                 csrftoken = csrfitems[0].value;
         }
            
        // END

        var html = [
            '<div class="ke-inline-block ' + cls + '">',
            (options.target ? '' : '<iframe name="' + target + '" style="display:none;"></iframe>'),
            (options.form ? '<div class="ke-upload-area">' : '<form class="ke-upload-area ke-form" method="post" enctype="multipart/form-data" target="' + target + '" action="' + url + '">'),
            '<span class="ke-button-common">',
            hiddenElements.join(''),
            // NEW CODE
            '<input type="hidden" name="csrfmiddlewaretoken" value="',csrftoken,'"/>',
            // END
            '<input type="button" class="ke-button-common ke-button" value="' + title + '" />',
            '</span>',红色部分的代码就是我们自己加入的代码，可以让editor在上传图片的同时也post上去了csrf。



新加：

方法二：><! 在kindeditor 文档中查到了一个API：

extraFileUploadParams
上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。

•数据类型: Array
•默认值: {}
这就更好了。

修改 kindeditor.html 文件：


<script type="text/javascript">
    var csrfitems = document.getElementsByName("csrfmiddlewaretoken");
    var csrftoken = "";
    if(csrfitems.length > 0)
    {
        csrftoken = csrfitems[0].value;
    }
        
    var editor ;
    KindEditor.ready(function(K) { 
        var options = { 
            cssPath : ('{{STATIC_URL}}editor/kindeditor/themes/default/default.css', 
                       '{{STATIC_URL}}editor/kindeditor/plugins/code/prettify.css'),
            width : '680px', 
            height : '400px', 
            filterMode : true,
            uploadJson : K.undef('/upload/'),
            extraFileUploadParams : {
                csrfmiddlewaretoken:csrftoken
            }
       }; 
        editor = K.create('textarea[name="content"]', options); 
    });                     
</script>  这样子更好一些，不用去改动kindeditor的源码。