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.

(Article sections proof-read)
(Example 4)
 
(5 intermediate revisions by one other user not shown)
Line 7: Line 7:
 
== Interaction Between CKEditor and File Browser ==
 
== Interaction Between CKEditor and File Browser ==
 
CKEditor automatically sends some additional arguments to the file browser:  
 
CKEditor automatically sends some additional arguments to the file browser:  
* <code>CKEditor</code> &ndash; name of the CKEditor instance,
+
* <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>[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 number used to pass the URL of a file to CKEditor (a random number).
+
* <code>CKEditorFuncNum</code> &ndash; anonymous function reference number used to pass the URL of a file to CKEditor (a random number).
  
 
<source lang="php">
 
<source lang="php">
Line 35: Line 35:
 
* <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> &ndash; the information added by CKEditor:
 
* <code>&CKEditor=editor2&CKEditorFuncNum=2&langCode=de</code> &ndash; the information added by CKEditor:
 
** <code>CKEditor=editor2</code> &ndash; the name of a CKEditor instance (<code>editor2</code>),
 
** <code>CKEditor=editor2</code> &ndash; the name of a CKEditor instance (<code>editor2</code>),
** <code>CKEditorFuncNum=2</code> &ndash; the number of anonymous function that should be used in the <code>[http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.tools.html#.callFunction CKEDITOR.tools.callFunction]</code>,
+
** <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>,
 
** <code>langCode=de</code> &ndash; language code (in this case: German). This parameter can be used to send localized error messages.
 
** <code>langCode=de</code> &ndash; language code (in this case: German). This parameter can be used to send localized error messages.
  
Line 47: Line 47:
  
 
=== Example 2 ===
 
=== Example 2 ===
Sending the url from file browser (JavaScript):
+
The following example shows how to send the URL from a file browser using JavaScript code:
  
 
<source lang="javascript">
 
<source lang="javascript">
Line 64: Line 64:
  
 
=== Example 3 ===
 
=== Example 3 ===
Sending back the url of uploaded file from PHP connector:
+
The following code shows how to send back the URL of an uploaded file from the 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 83: Line 83:
 
?>
 
?>
 
</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>
 
 
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 ===
 
=== 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.
  
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 102: 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.