Search code examples
ckeditorckeditor4.xckfinder

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

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.

Solution

  • 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.

    enter image description here

    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.