Revision as of 12:37, 31 August 2009

CKEditor can be easily integrated with an external file browser/uploader. Once properly set up, all file browser features will automatically become available (i.e. the "Browse Server" button⁽¹⁾, the "Upload" tab⁽²⁾ in "Link", "Image" and "Flash" dialog windows).

Basic Configuration

The filebrowserBrowseUrl setting is the location of an external file browser, that should be launched when "Browse Server" button⁽¹⁾ is pressed.

The filebrowserUploadUrl setting is the location of a script that handles file uploads. If set, the "Upload" tab⁽²⁾ will appear in dialog boxes (only where such functionality is available, i.e. in "Link", "Image" and "Flash" dialog windows).

Example 1

CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php',
}); 

It is also possible to set a separate url for a selected dialog box, using the dialog name in file browser settings: filebrowser[dialogName]BrowseUrl and filebrowser[dialogName]UploadUrl.

For example to set a special upload url for the image dialog, set the filebrowserImageUploadUrl property:

Example 2

CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserImageBrowseUrl : '/browser/browse.php?type=Images'
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageUploadUrl : '/uploader/upload.php?type=Images'
}); 

In the example above, filebrowserBrowseUrl and filebrowserUploadUrl settings will be used by default, however in the Image dialog box, CKEditor will use filebrowserImageBrowseUrl and filebrowserImageUploadUrl configuration settings instead.

File Browser Window Size

The default width of file browser window in CKEditor is set to 80% of screen width, the default hight is set to 70% of screen height. If for some reasons, the default values are not suitable for you, you can change it to any other value.

Use filebrowserWindowWidth to change width and filebrowserWindowHeight to change height of the window.

To set the size of the window in pixels, just set the number value (e.g. "800"). If you prefer to set height and width of the window in percentage of the screen, remember to add percent sign at the end (e.g. "60%").

Example 3

CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserWindowWidth : '640',
        filebrowserWindowHeight : '480',
}); 

To set the window size of file browser inside of a specific dialog box, use filebrowser[dialogName]WindowWidth and filebrowser[dialogName]WindowHeight settings.

For example, to change the file browser window size only in "Image" dialog box, change set the filebrowserImageWindowWidth and filebrowserImageWindowHeight settings.

Example 4

CKEDITOR.replace( 'editor1', {
        filebrowserBrowseUrl : '/browser/browse.php',
        filebrowserUploadUrl : '/uploader/upload.php',
        filebrowserImageWindowWidth : '640',
        filebrowserImageWindowHeight : '480',
});