ive created a file browser for ckeditor.. having it open in a pop-up is messy in the extreme..

how can i tie into the click event on the browse server to rather launch the file browser in a modal etc.

basically looking at something like

config.filebrowserClick = function(){
// do stuff here that happens when the button gets clicked
}

ive created a file browser for ckeditor.. having it open in a pop-up is messy in the extreme..

how can i tie into the click event on the browse server to rather launch the file browser in a modal etc.

basically looking at something like

config.filebrowserClick = function(){
// do stuff here that happens when the button gets clicked
}

• javascript
• ckeditor

• 2 You want to open a file browser in a modal dialog, rather than use the browser's native dialog? Not possible. – Matt Ball Commented Mar 30, 2011 at 13:43
• any way to tie into the click? when the user clicks on the browse server button? :( – WilliamStam Commented Mar 31, 2011 at 6:47
• Did you ever get this working? I am looking to do the exact same thing, open the file browser in an iframe which sits in a modal dialog. – Peuge Commented Aug 2, 2011 at 11:38
• I am faced with the same issue. I suspect that one could configure the button to show up and then override the button click behavior (without altering CKEditor source which I really don't want to do) with jQuery. I will attempt and report back if I succeed. – Matthew Nichols Commented Oct 19, 2011 at 15:20

4 Answers 4

The answer by @1I111I1 was very useful for me, but the downside is that it would have the same behavior among all instances. If you need special configuration per instance (for example each instance might have a different default path for its root directory), that would not be easy this way. Also, a file manager would better know whether you want an image or a file because they would require a different view method (like thumbnail mode for image select).

So, I have edited it so that it would fire custom events for each instance based on the browse mode (image/link).

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

// Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
if (dialogName == 'image' || dialogName == 'link') {
    // Get a reference to the "Image Info" tab.
    infoTab = dialogDefinition.getContents('info');

    // Get the "Browse" button
    browse = infoTab.get('browse');

    // Override the "onClick" function
    browse.onClick = function () {
        var me = this,
            dialog = me.getDialog(),
            editor = dialog.getParentEditor(),
            callBack = editor._.filebrowserFn,
            win;

        // This may or may not be needed.  Got it from ckeditor docs. 
        editor._.filebrowserSe = me;

        // when the button gets clicked fire appropriate event 
        if (dialogName == 'image') {
            dialog.getParentEditor().fire('browseImageRequest', callBack);
        } else {
            dialog.getParentEditor().fire('browseLinkRequest', callBack);
        }



    }

}

});

Now you can register for the appropriate event in each instance individually and then use the provided callback to return the selected value:

    CKEDITOR.instances['myinstance'].on('browseImageRequest', (event)=> {
        // Call back to CKEDITOR with new path to image (i.e. replace path below with new url for image)
        window["CKEDITOR"].tools.callFunction(event.data, 'images/noimage.jpg');
    });

    CKEDITOR.instances['myinstance'].on('browseLinkRequest', (event) => {
        // Call back to CKEDITOR with new path to image (i.e. replace path below with new url)
        window["CKEDITOR"].tools.callFunction(event.data, 'http://www.google.');
    });

Also note that before all of this, you should activate the browse button with the configuration that is required for pop-up window mode, then this workaround will override the onClick action and instead of opening pop-ups it will fire the appropriate event

CKEDITOR.replace( 'editor1', {
                filebrowserBrowseUrl: '#',
                filebrowserImageBrowseUrl: '#'
});

It 100% is possible, and other people are doing it. You can see this feature working as the OP requests on Mailchimp.

"Matt Ball" has edited the question and replied that it is not possible, but he seemingly is not familiar with CKEditor and CKFinder, and is instead thinking that the OP is wanting to use the browser's "browse file" - but that is clearly not what the OP is looking for.

The OP has a file browser such as CKFinder running within a popup window. Instead of invoking as a popup he would like to invoke the file browser as a modal window.

I am also looking at how to do this, and I suspect it will involve editing the files under _source/plugins/image and modifying the Child Browser (that's the technical term for how CKFinder is invoked) to instead load as a modal. The number one problem here is the violation of encapsulation, as Jquery code for modal windows does not belong within CKEditor...

I had to do something very similar recently and decided to figure it out on my own. Once I did, I made myself a note to e back and post the solution. That was 3 months ago, but here is a simplified version of what I did, which was basically overriding the onClick function with modified code from ckeditor's browseServer function (included below as well).

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

    // Check if the definition is from the dialog window you are interested in (the "Image" dialog window).
    if ( dialogName == 'image' ) {
        // Get a reference to the "Image Info" tab.
        infoTab = dialogDefinition.getContents( 'info' );

        // Get the "Browse" button
        browse = infoTab.get( 'browse' );

        // Override the "onClick" function
        browse.onClick = function () {
            var  me      = this,
                dialog   = me.getDialog(),
                editor   = dialog.getParentEditor(),
                callBack = editor._.filebrowserFn,
                win;

            // This may or may not be needed.  Got it from ckeditor docs. 
            editor._.filebrowserSe = me;

            // do stuff here that happens when the button gets clicked

            // Call back to CKEDITOR with new path to image (i.e. replace path below with new url for image)
            window.CKEDITOR.tools.callFunction( callBack, 'path' );

        }

    }

});

Here is the browseServer function I got from the ckeditor docs, which can be found here - http://docs.ckeditor./source/plugin33.html.

function browseServer() {
    var dialog = this.getDialog();
    var editor = dialog.getParentEditor();

    editor._.filebrowserSe = this;

    var width = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowWidth' ] || editor.config.filebrowserWindowWidth || '80%';
    var height = editor.config[ 'filebrowser' + ucFirst( dialog.getName() ) + 'WindowHeight' ] || editor.config.filebrowserWindowHeight || '70%';

    var params = this.filebrowser.params || {};
    params.CKEditor = editor.name;
    params.CKEditorFuncNum = editor._.filebrowserFn;
    if ( !params.langCode )
        params.langCode = editor.langCode;

    var url = addQueryString( this.filebrowser.url, params );
    // TODO: V4: Remove backward patibility (#8163).
    editor.popup( url, width, height, editor.config.filebrowserWindowFeatures || editor.config.fileBrowserWindowFeatures );
}

I hope this helps. Sorry I didn't answer sooner.

(Note: I'm using ckeditor 4.4.7, but I assume it should be similar for other versions)

If I understand what you're trying to do, it's not possible. For security reasons, JavaScript in the browser is sandboxed so that it has no access to the local filesystem.