Revision as of 11:01, 1 February 2011

CKEditor can be easily integrated with your own file browser.

To connect a file browser that is already compatible with CKEditor (like CKFinder), follow the File Browser (Uploader) documentation.

Interaction between CKEditor and File Browser

CKEditor sends automatically some additional arguments to the filebrowser:

• CKEditor - name of the CKEditor instance
• langCode - CKEditor language ("en" for English)
• CKEditorFuncNum - anonymous function number used to pass the url of a file to CKEditor (random number)

CKEditor=editor1&CKEditorFuncNum=1&langCode=en

Example 1

Suppose that CKEditor was created with the following code:

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

To browse files CKEditor will call:

/browser/browse.php?type=Images&CKEditor=editor2&CKEditorFuncNum=2&langCode=de

• /browser/browse.php?type=Images - the filebrowserBrowseUrl value
• &CKEditor=editor2&CKEditorFuncNum=2&langCode=de - information added by CKEditor
  • CKEditor=editor2 - name of CKEditor instance (editor2)
  • CKEditorFuncNum=2 - the number of anonymous function that shoule be used in CKEDITOR.tools.callFunction
  • langCode=de - language code (German), can be used to send localized error messages

Passing the URL of selected file

To send back the file url from an external file browser, simply call CKEDITOR.tools.callFunction and pass there CKEditorFuncNum as the first argument:

window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );

If data (the third argument) is a string, it will be displayed by CKEditor (usually used to display an error message if problem occurs during file upload).

Example 2

Sending the url from file browser (JavaScript):

// Helper function to get parameters from the query string.
function getUrlParam(paramName)
{
  var reParam = new RegExp('(?:[\?&]|&)' + paramName + '=([^&]+)', 'i') ;
  var match = window.location.search.match(reParam) ;

  return (match && match.length > 1) ? match[1] : '' ;
}
var funcNum = getUrlParam('CKEditorFuncNum');
var fileUrl = '/path/to/file.txt';
window.opener.CKEDITOR.tools.callFunction(funcNum, fileUrl);

Example 3

Sending back the url of uploaded file from PHP connector:

<?php
// Required: anonymous function number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load specific configuration file or anything else)
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages
$langCode = $_GET['langCode'] ;

// Check the $_FILES array and save the file. Assign the correct path to some variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will assign here something only if file could not be uploaded.
$message = '';

echo "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction($funcNum, '$url', '$message');</script>";
?>

If data is a function, it will be executed in the scope of a button that called the file browser. It means that the server connector can directly access CKEditor and the dialog box to which this button belongs.

Example 4

Suppose that apart from passing the fileUrl value that is assigned to appropriate filed automatically based on the dialog definition, you want also to set the "alt" attribute if the file browser was opened in the Image dialog. In order to do this, simply pass an anonymous function as a third argument:

window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() {
  // Get the reference to a dialog.
  var element, dialog = this.getDialog();
  // Check if it is an Image dialog.
  if (dialog.getName() == 'image') {
    // Get the reference to a text field that holds the "alt" attribute.
    element = dialog.getContentElement( 'info', 'txtAlt' );
    // Assign the new value.
    if ( element )
      element.setValue( alt );
  }
  ...
  // Return false to stop further execution - in such case CKEditor will ignore the second argument (fileUrl)
  // and the onSelect function assigned to a button that called the file browser (if defined).
  [return false;]
});