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的源码。

posted @ 2012-11-17 10:31  notewo  阅读(2323)  评论(1编辑  收藏  举报