Media Browser

This plugin provides a minimal media browser API as an alternative to the filebrowser plugin and does not care about advanced features like file uploads, so stick with the filebrowser plugin if you need those.

Unlike the filebrowser plugin it does not use URL parameters to pass values between the editor and the browser windows, but uses the window.postMessage() function to communicate between both windows. So you can pass more than just the URL of the selected media from the media browser to the editor or even multiple media elements at once. Currently the only plugin that uses this API is the Media Widget.

Plugin Integration

If you wanna use the API in your plugin, you just have to define a callback function mediabrowser in the Browse server button configuration of your plugin's dialog, p.e.

    id: 'browse',
    type: 'button',
    label: common.browseServer,
    hidden: true,
    mediabrowser: function (data) {
        if (!data.src) {

        var dialog = this.getDialog();

        ['alt', 'src', 'type'].forEach(function (item) {
            if (!!data[item]) {
                dialog.getContentElement('info', item).setValue(data[item]);

Media Browser Integration

You can implement your media browser as you wish, the only two requirements are that you configure the URL to your media browser as mediabrowserUrl p.e.

CKEDITOR.replace(document.getElementById('editor'), {
    mediabrowserUrl: '/url/to/mediabrowser',

and that your media browser notifies the editor by posting a message p.e. like

// NOTE: window.opener.origin is only accessible on the same domain
    alt: 'Optional alternative text',
    src: '/url/to/media'
}, window.opener.origin);



1,055 downloads (view stats)


Plugin versions CKEditor versions
4.11 4.10 4.9

Version: 1.0

DownloadRelease notes

Redefine the mediabrowser property to allow plugins to register a callback function with the "Browse Server" button in the dialog

Twitter Facebook Facebook Instagram Medium Google+ GitHub Arrow down Phone Menu Close icon Check