How to add a field to POST values in CKeditor upload

后端未结

关注

 6  1868

I use django and ckeditor to provide wysiwyg taste to TextEdits. I would like to use CKEditor file upload function (in filebrowser / image dialog), but the

相关标签:

6条回答

名媛妹妹

2020-12-31 21:40

The question is too old but...

Version 4.5 you can add hook into any request

editor.on( 'fileUploadRequest', function( evt ) {
    var xhr = evt.data.fileLoader.xhr;

    xhr.setRequestHeader( 'Cache-Control', 'no-cache' );
    xhr.setRequestHeader( 'csrf header ', 'HEADER' );
    xhr.withCredentials = true;
} );

0 讨论(0)

清歌不尽

2020-12-31 21:45

Providing you are sending a CSFR token in the URL across HTTPS it should be ok to do that (from a security pint of view) and also a lot easier to deal with.

That assumes django can read that variable or you are able to easily mod django. These answers trying to alter CKeditor seem a bit too much work imo.

As long as your CSFR_token is being sent by the users browser in a secure way to the server it doesn't matter if it is via POST or GET. The security concern at play is a man in the middle attack, i.e you don't want a users CSFR_token being broadcast in plain text.

Strictly speaking this kind of data should be sent as POST according to the HTTP spec but this seems like a situation where 'misusing' the GET protocol might be acceptable as you don't have control of the CKEditor code in a particularly elegant way.

Also you could get caught out if CKEditor changes things in an upgrade, passing the token via the URL will always work.

0 讨论(0)
发布评论:

提交评论
- 加载中...

小蘑菇

2020-12-31 21:58

It seems that there is no way to add data to ckeditor upload data without editing ckeditor source code. The source code to be modified is plugins/dialogui/plugin.js, around lines 1440 in ckeditor 3.6.2, where ckeditor creates the form used by the upload iframe.

// ADDED TO CKEDITOR CODE %<
var csrfitems = document.getElementsByName("csrfmiddlewaretoken")
var csrftoken = ""
if(csrfitems.length > 0)
    csrftoken = csrfitems[0].value
// >% END OF ADDED CODE
if ( elementDefinition.size )
    size = elementDefinition.size - ( CKEDITOR.env.ie  ? 7 : 0 );   // "Browse" button is bigger in IE.
frameDocument.$.write( [ '<html dir="' + langDir + '" lang="' + langCode + '"><head><title></title></head><body style="margin: 0; overflow: hidden; background: transparent;">',
'<form enctype="multipart/form-data" method="POST" dir="' + langDir + '" lang="' + langCode + '" action="',
CKEDITOR.tools.htmlEncode( elementDefinition.action ),
'">',
// ADDED TO CKEDITOR CODE
    '<input type="hidden" name="csrfmiddlewaretoken" value="',csrftoken,'"/>',
    // >% END OF ADDED CODE
'<input type="file" name="',
CKEDITOR.tools.htmlEncode( elementDefinition.id || 'cke_upload' ),
'" size="',
CKEDITOR.tools.htmlEncode( size > 0 ? size : "" ),
'" />',
'</form>',

And now we can use safely upload in ckeditor with django

0 讨论(0)

予麋鹿

2020-12-31 21:59

You can register for the dialogDefinition event, and completely rewrite the upload tab, thus:

CKEDITOR.on('dialogDefinition', function (ev) {
  var dialogName = ev.data.name;
  var dialogDefinition = ev.data.definition;
  if (dialogName == 'image') {
    dialogDefinition.removeContents('Upload');
    dialogDefinition.addContents({
      title: "Upload",
      id: "upload",
      label: "Upload",
      elements: [{
        type: "html",
        html: '<form><input id="imageupload" type="file" name="files[]" />{%csrf_token%}</form>'
      }]
    });
   }
});

This is an untested simplification of my real-world version, but hopefully it shows the idea.

This does not set the URL field in the image dialog, so clicking OK on the dialog will give you an error message. You will need to set that on a successful upload, thus:

CKEDITOR.dialog.getCurrent().getContentElement('info', 'txtUrl').setValue(theURL);

0 讨论(0)

谎友^

2020-12-31 21:59

I experienced a similar problem when integrating image uploading through CKEditor for Elgg. The least intrusive solution I came up with was to bind to the onClick event for the submit button and modify the form directly from that:

CKEDITOR.on('dialogDefinition', function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;

    if (dialogName === 'image') {
        var uploadTab = dialogDefinition.getContents('Upload');

        for (var i = 0; i < uploadTab.elements.length; i++) {
            var el = uploadTab.elements[i];

            if (el.type !== 'fileButton') {
                continue;
            }

            // add onClick for submit button to add inputs or rewrite the URL
            var onClick = el.onclick;

            el.onClick = function(evt) {
                var dialog = this.getDialog();
                var fb = dialog.getContentElement(this['for'][0], this['for'][1]);
                var action = fb.getAction();
                var editor = dialog.getParentEditor();
                editor._.filebrowserSe = this;

                // if using jQuery
                $(fb.getInputElement().getParent().$).append('<input type="hidden" name="foo" value="bar">');

                // modifying the URL
                fb.getInputElement().getParent().$.action = '/my/new/action?with&query&params=1';


                if (onClick && onClick.call(evt.sender, evt) === false) {
                        return false;
                }

                return true;
            };
        }
    }
});

0 讨论(0)

闹比i

2020-12-31 22:00

The extra data sent to the server is passed by get request. I was trying to add extra data and finally achieve this adding to a url parameters of the form that is used to send data

CKEDITOR.on('dialogDefinition', function(ev)
   {
     var dialogName = ev.data.name;
     var dialogDefinition = ev.data.definition;
     if (dialogName == 'image')
     {
           dialogDefinition.contents[2].elements[0].action += '&pin=123456';
            /* 2 is the upload tab it have two elements 0=apparently is the
            and 1: is the button to perform the upload, in 0 have the action property with the parameters of the get request simply adding the new data               
              */ 

     }
   });

0 讨论(0)