CKSource

CKEditor can be easily integrated with your own file browser.

To connect already compatible file browser with CKEditor (like CKFinder), simply 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

CKEditor=editor1&CKEditorFuncNum=1&langCode=en

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).

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

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;]
});