Custom File Browser

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

Custom File Browser

To replace the default image file browser with, for instance a custom image gallery, edit the fckconfig.js and set (for example):

FCKConfig.ImageBrowserURL = '/myfilebrowserpath/browser.php' ;

Function SetUrl

When a file is selected on your custom File Browser implementation, you must simply call the "SetUrl" JavaScript function in the window.opener (the FCKeditor dialog that opened the File Browser), passing the URL of the file.

A very simple implementation (with no server side integration) could be something like this:

<html>
<head>
<title>My File Browser</title>
<script type="text/javascript">

function SelectFile( fileUrl )
{
// window.opener.SetUrl( url, width, height, alt);
window.opener.SetUrl( fileUrl ) ;
window.close() ;
}
</script>
</head>
<body>
<a href="javascript:SelectFile('File1.jpg');">File 1</a><br />
<a href="javascript:SelectFile('File2.jpg');">File 2</a>
</body>
</html>

UploadURL

If your custom browser handles uploading of images, flash objects or links in a radically different way you might want to remember to change the standard image,flash and links uploading tab in fckconfig.js file or in you custom Configuration File.

Examples:

  • Images
    FCKConfig.ImageUploadURL = '/your_file_browser_directory/upload.php'
  • Flash objects
    FCKConfig.FlashUploadURL = '/your_file_browser_directory/upload.php'
  • Links
    FCKConfig.LinkUploadURL = '/your_file_browser_directory/upload.php'


NOTE: For all the information about the functions written in the example view: ImageUploadURL,FlashUploadURL and LinkUploadURL configuration options.