How do I pass custom values to CKFinder3 when instantiating a CKEditor4 instance?

Question

I'm having some trouble using pass to pass variables to my CKFinder3 (ASP) connector when using CKEditor4.

I create my editor instance with:

CKFinder.setupCKEditor( myEditor, {
    pass:         'testVar',
    testVar:    'nooice',
    ...
});

but the variable just doesn't seem to make it over to CKFinder.

If I add this code to the CKFinder config directly it does work though:

config.pass = 'testVar';
config.testVar = 'nooice';

That's great, but the values I want to pass will be dynamic, so I need to pass them in when I call .setupCKEditor() on the page. I've also tried using connectorInfo: 'testVar=nooice', but that doesn't work either.

Has anyone run into this? I found a great answer and example on this question, How to pass query string parameters in ckeditor for the picture (ckfinder) button?, but the described solution is basically what I'm doing and has no affect for me.

I have been able to get this working in a CKEditor5 test using:

ClassicEditor.create( document.querySelector( '#bodyContent' ), {
    ckfinder: {
        uploadUrl: '/ckfinder3/connector?command=QuickUpload&type=Images&responseType=json',
        options: {
            pass: 'testVar',
            testVar: 'nooice'
        }
    },
    ...
} );

But I cannot figure it out in CKEditor4.

j.swiderski · Accepted Answer · 2019-04-12T14:34:21.147

You pass them like so:

    var editor = CKEDITOR.replace( 'editor1', {
        language : 'en',        
    } );

    CKFinder.setupCKEditor( editor, {           
        test : 'testvalA',
        token : '7901a26e4bc422aef54eb45A',
        pass : 'token,test' 
    });

In the example above you are passing test and token parameters.

If you are using manual integration method, you need to attach parameters to filebrowserXYZBrowseUrl configuration settings as shown below:

    var editor = CKEDITOR.replace( 'editor1', {     

        filebrowserBrowseUrl: '../ckfinder/ckfinder.html?id=abc&foo=bar&test=custom',
        filebrowserImageBrowseUrl: '/ckfinder/ckfinder.html?type=Images&id=abc&foo=bar&test=custom',
        filebrowserUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&id=abc&custom=test',
        filebrowserImageUploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&id=abc&custom=test',
    } );

Now the problem is that CKFinder will only pass a predefined set or URL parameters: id, type, resourceType, langCode, CKEditor and CKEditorFuncNum. If you would like to use more parameters, you need to pass them manually as CKFinder configuration settings and you need to do that in ckfinder/ckfinder.html file (you need to modify it) e.g.

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>CKFinder 3 - File Browser</title>
</head>
<body>

<script src="ckfinder.js"></script>
<script>
    function getUrlParams()  {
            var vars = {};
            window.location.href.replace( /[?&]+([^=&]+)=([^&]*)/gi, function( match, key, value ) {
                vars[ key ] = value;
            } );

            return vars;
    }


    var params = getUrlParams(),
        config  = { pass : '' },
        ckfServicedParams = [ 'id', 'type', 'resourceType', 'langCode', 'CKEditor', 'CKEditorFuncNum' ];

    for( var key in params ){
        if ( ckfServicedParams.indexOf( key ) < 0 ) {
            config.pass = config.pass.concat( config.pass ? ','+key : key);
            config[key] = params[key];
        }
    }

    CKFinder.start( config ); 
</script>

</body>
</html>

NOTES:

If you would like extra parameters to be sent when you upload files using CKEditor Image Dialog Upload Tab, you need to add them to filebrowserXYZUploadUrl configuration settings as well (you can use different parameters as shown in example above).
Please note these parameters aren't exactly dynamic. You define them once per editor load and can't change them afterwards unless you destroy/create editor instance or reload page with the editor.

Thanks, I think I got it working, but do you now of any reason that having `filebrowserBrowseUrl: '/ckeditor4/js/ckfinder3/connector?command=QuickUpload&type=Files',` and/or `filebrowserImageBrowseUrl: '/ckeditor4/js/ckfinder3/connector?command=QuickUpload&type=Images',` present when creating the connector would cause an issue with this? It seems when I set these values the values stop passing. — The Red Duke, Apr 09 '19 at 18:30
It stops working because this is a different integration method called Manual integration. You can't use Manual Integration with `setupCKEditor`. This is "either or" choice. Please https://ckeditor.com/docs/ckfinder/ckfinder3-php/integration.html#integration_ckeditor. — j.swiderski, Apr 10 '19 at 10:19
Is there a way to use Manual integration and also `pass` a value?I tried removing `setupCKEditor` and just setting the various `filebrowserBrowseUrl` options while appending my variable to their URL values but it does not work. When the Finder loads, the initial document sees the params but all subsequent connector calls to not get the value passed to them. — The Red Duke, Apr 10 '19 at 16:11
Edit: also, i've also added `config.pass = "appGuid";` to my config as shown in https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-pass — The Red Duke, Apr 10 '19 at 16:18
I have updated my answer. It is possible with Manual Integration method but you need to add some extra code to do it. I think i will report it to CKSource asking if they could consider adding extra parameters a feature request. — j.swiderski, Apr 14 '19 at 11:47
Yes! Sorry for the slow reply, this did work. I actually came to pretty much the same conclusion about modifying the ckfinder.html file before I saw your last response, but the example you gave is very good and robust. Thank you again! — The Red Duke, May 02 '19 at 14:58
Nice to hear it worked for you. Maybe you could also create some white list of parameters you will service just to protect yourself from malicious users trying to perform attacks through Parameter Tampering. — j.swiderski, May 02 '19 at 16:06
Yep, that's basically what we have done! As a hopefully useful reference for others, a full example solution can be seen here: [Set common key prefix for S3 bucket per CKFinder 3 instance](https://stackoverflow.com/questions/54933551/set-common-key-prefix-for-s3-bucket-per-ckfinder-3-instance/55955098#55955098) — The Red Duke, May 03 '19 at 17:38

How do I pass custom values to CKFinder3 when instantiating a CKEditor4 instance?

1 Answers1

Linked