Integrating CKEditor with a 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.

(Example 4)
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
{{#CUSTOMTITLE:Integrating CKEditor with a Custom File Browser}}
 +
__TOC__
 
CKEditor can be easily integrated with your own file browser.
 
CKEditor can be easily integrated with your own file browser.
  
To connect already compatible file browser with CKEditor (like [http://ckfinder.com CKFinder]), simply follow the [[CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)|File Browser (Uploader)]] documentation.
+
To connect a file browser that is already compatible with CKEditor (like [http://ckfinder.com CKFinder]), follow the [[CKEditor_3.x/Developers_Guide/File_Browser_(Uploader)|File Browser (Uploader)]] documentation.
  
== Interaction between CKEditor and File Browser ==
+
== Interaction Between CKEditor and File Browser ==
 +
CKEditor automatically sends some additional arguments to the file browser:
 +
* <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#name CKEditor]</code> &ndash; name of the CKEditor instance,
 +
* <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#langCode langCode]</code> &ndash; CKEditor language (<code>en</code> for English),
 +
* <code>CKEditorFuncNum</code> &ndash; anonymous function reference number used to pass the URL of a file to CKEditor (a random number).
  
CKEditor sends automatically some additional arguments to the filebrowser:
+
<source lang="php">
* <code>CKEditor</code> - name of the CKEditor instance
+
CKEditor=editor1&CKEditorFuncNum=1&langCode=en
* <code>langCode</code> - CKEditor language ("en" for English)
+
</source>
* <code>CKEditorFuncNum</code> - anonymous function number used to pass the url of a file to CKEditor (random number)
 
 
 
CKEditor=editor1&CKEditorFuncNum=1&langCode=en
 
  
==== Example 1 ====
+
=== Example 1 ===
Suppose that CKEditor was created with the following code:
+
Suppose that CKEditor was created using the following JavaScript call:
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 21: Line 24:
 
         filebrowserUploadUrl : '/uploader/upload.php?type=Files'
 
         filebrowserUploadUrl : '/uploader/upload.php?type=Files'
 
     });  
 
     });  
</source><br />
+
</source>
  
To browse files CKEditor will call:
+
In order to browse files, CKEditor will call:
/browser/browse.php?type=Images&CKEditor=editor2&CKEditorFuncNum=2&langCode=de
+
<source lang="php">
 +
/browser/browse.php?type=Images&CKEditor=editor2&CKEditorFuncNum=2&langCode=de
 +
</source>
  
* <code>/browser/browse.php?type=Images</code> - the filebrowserBrowseUrl value
+
The call includes the following elements:
* <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> - information added by CKEditor
+
* <code>/browser/browse.php?type=Images</code> &ndash; the value of the <code>filebrowserBrowseUrl</code> parameter,
** <code>CKEditor=editor2</code> - name of CKEditor instance (editor2)
+
* <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> &ndash; the information added by CKEditor:
** <code>CKEditorFuncNum=2</code> - the number of anonymous function that shoule be used in CKEDITOR.tools.callFunction  
+
** <code>CKEditor=editor2</code> &ndash; the name of a CKEditor instance (<code>editor2</code>),
** <code>langCode=de</code> - language code (German), can be used to send localized error messages
+
** <code>CKEditorFuncNum=2</code> &ndash; the reference number of an anonymous function that should be used in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code>,
=== Passing the URL of selected file ===
+
** <code>langCode=de</code> &ndash; language code (in this case: German). This parameter can be used to send localized error messages.
  
To send back the file url from an external file browser, simply call <code>CKEDITOR.tools.callFunction</code> and pass there CKEditorFuncNum as the first argument:
+
== Passing the URL of the Selected File ==
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );
+
To send back the file URL from an external file browser, call <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code> and pass <code>CKEditorFuncNum</code> as the first argument:
 
+
<source lang="php">
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).
+
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl [, data] );
 +
</source>
  
==== Example 2 ====
+
If <code>data</code> (the third argument) is a string, it will be displayed by CKEditor. This parameter is usually used to display an error message if a problem occurs during the file upload.
  
Sending the url from file browser (JavaScript):
+
=== Example 2 ===
 +
The following example shows how to send the URL from a file browser using JavaScript code:
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 56: Line 63:
 
</source>
 
</source>
  
==== Example 3 ====
+
=== Example 3 ===
 
+
The following code shows how to send back the URL of an uploaded file from the PHP connector:
Sending back the url of uploaded file from PHP connector:
 
  
 
<source lang="php">
 
<source lang="php">
 
<?php
 
<?php
// Required: anonymous function number as explained above.
+
// Required: anonymous function reference number as explained above.
 
$funcNum = $_GET['CKEditorFuncNum'] ;
 
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load specific configuration file or anything else)
+
// Optional: instance name (might be used to load a specific configuration file or anything else).
 
$CKEditor = $_GET['CKEditor'] ;
 
$CKEditor = $_GET['CKEditor'] ;
// Optional: might be used to provide localized messages
+
// Optional: might be used to provide localized messages.
 
$langCode = $_GET['langCode'] ;
 
$langCode = $_GET['langCode'] ;
  
// Check the $_FILES array and save the file. Assign the correct path to some variable ($url).
+
// Check the $_FILES array and save the file. Assign the correct path to a variable ($url).
 
$url = '/path/to/uploaded/file.ext';
 
$url = '/path/to/uploaded/file.ext';
// Usually you will assign here something only if file could not be uploaded.
+
// Usually you will only assign something here if the file could not be uploaded.
 
$message = '';
 
$message = '';
  
Line 78: Line 84:
 
</source>
 
</source>
  
<div style="color:#dd0000;border:#000 1px solid;padding:5px;margin-bottom:14px"><strong>Note:</strong> the information below applies to CKEditor rev 4940+ (current [http://nightly.ckeditor.com nightly build], CKEditor 3.1.1+/3.2+ (not available at the moment of writing this part of documentation - 18 Jan 2010))</div>
+
=== Example 4 ===
 
+
If <code>data</code> is a function, it will be executed in the scope of the button that called the file browser. It means that the server connector can have direct access CKEditor and the dialog window to which the button belongs.
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:
+
Suppose that apart from passing the <code>fileUrl</code> value that is assigned to an appropriate field automatically based on the dialog window definition you also want to set the <code>alt</code> attribute, if the file browser was opened in the '''Image Properties''' dialog window. In order to do this, pass an anonymous function as a third argument:
  
 
<source lang="javascript">
 
<source lang="javascript">
 
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() {
 
window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() {
   // Get the reference to a dialog.
+
   // Get the reference to a dialog window.
 
   var element, dialog = this.getDialog();
 
   var element, dialog = this.getDialog();
   // Check if it is an Image dialog.
+
   // Check if this is the Image dialog window.
 
   if (dialog.getName() == 'image') {
 
   if (dialog.getName() == 'image') {
 
     // Get the reference to a text field that holds the "alt" attribute.
 
     // Get the reference to a text field that holds the "alt" attribute.
Line 96: Line 99:
 
     // Assign the new value.
 
     // Assign the new value.
 
     if ( element )
 
     if ( element )
       element.setValue( alt );
+
       element.setValue( "alt text" );
 
   }
 
   }
 
   ...
 
   ...

Latest revision as of 09:28, 30 August 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 automatically sends some additional arguments to the file browser:

  • CKEditor – name of the CKEditor instance,
  • langCode – CKEditor language (en for English),
  • CKEditorFuncNum – anonymous function reference number used to pass the URL of a file to CKEditor (a random number).
CKEditor=editor1&CKEditorFuncNum=1&langCode=en

Example 1

Suppose that CKEditor was created using the following JavaScript call:

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

In order to browse files, CKEditor will call:

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

The call includes the following elements:

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

Passing the URL of the Selected File

To send back the file URL from an external file browser, call CKEDITOR.tools.callFunction and pass 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. This parameter is usually used to display an error message if a problem occurs during the file upload.

Example 2

The following example shows how to send the URL from a file browser using JavaScript code:

// Helper function to get parameters from the query string.
function getUrlParam(paramName)
{
  var reParam = new RegExp('(?:[\?&]|&amp;)' + 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

The following code shows how to send back the URL of an uploaded file from the PHP connector:

<?php
// Required: anonymous function reference number as explained above.
$funcNum = $_GET['CKEditorFuncNum'] ;
// Optional: instance name (might be used to load a 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 a variable ($url).
$url = '/path/to/uploaded/file.ext';
// Usually you will only assign something here if the file could not be uploaded.
$message = '';

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

Example 4

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

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

window.opener.CKEDITOR.tools.callFunction( funcNum, fileUrl, function() {
  // Get the reference to a dialog window.
  var element, dialog = this.getDialog();
  // Check if this is the Image dialog window.
  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 text" );
  }
  ...
  // 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;]
});
This page was last edited on 30 August 2011, at 09:28.